Easyui datagrid 显示隐藏列

html:

<thead>

<tr>

<%-- <th data-options="field:'StationId',checkbox:true,sortable:true,width:50,align:'center'">

</th>

基站名称

</th>--%>

回路名称

</th>

SIM卡号

</th>

GPRS状态

</th>

电表状态

</th>

上一小时用电量

</th>

本小时用电量

</th>

昨天用电量

</th>

今天用电量

</th>

上月用电量

</th>

本月用电量

</th>

</th>

</th>

</th>

</th>

</th>

</th>

</th>

</th>

能耗排名

</th>

能耗等级

</th>

详细信息

</th>

</tr>

</thead>

</table>

</div>

<div id="GetShowColumn" class="easyui-dialog" style="width: 520px; height: 350px;

padding: 10px 20px" data-options="closed:true,buttons:'#dlg-GetShowColumn',modal:true">

<input type="checkbox" name="StationName" id="StationName" value="StationName" /><label

for="StationName">基站名称</label>

<input type="checkbox" name="SIM_Number" id="SIM_Number" value="SIM_Number" /><label for="SIM_Number">SIM卡号</label>

<input type="checkbox" name="GPRS_Status" id="GPRS_Status" value="GPRS_Status" /><label for="GPRS_Status">GPRS状态</label>

</div>

<input type="checkbox" name="PreHour" id="PreHour" value="ElePreHour" /><label

for="PreHour">上小时用电量</label>

<input type="checkbox" name="CurHour" id="CurHour" value="EleCurHour" /><label for="CurHour">本小时用电量</label>

<input type="checkbox" name="Yesterday" id="Yesterday" value="ElePreDay" /><label for="Yesterday">昨天用电量</label>

<input type="checkbox" name="ToDay" id="ToDay" value="EleCurDay" /><label for="ToDay">今天用电量</label>

</div>

<input type="checkbox" name="PreMonth" id="PreMonth" value="ElePreMonth" /><label

for="PreMonth">上月用电量</label>

<input type="checkbox" name="CurMonth" id="CurMonth" value="EleCurMonth" /><label for="CurMonth">本月用电量</label>

</div>

<input type="checkbox" name="Ic" id="Ic" value="Ic" /><label

for="Ic">Ic</label>

</div>

<input type="checkbox" name="P" id="P" value="P" /><label

for="Names">P</label>

</div>

</div>

</form>

</div>

保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"

onclick="javascript:$('#GetShowColumn').dialog('close')">取消</a>

</div>

JS:

$(function () {

$('#List').datagrid({

frozenColumns: [[

{ title: 'StationId', field: 'StationId', checkbox: true },

{ title: '基站名称', field: 'StationName', width: 100, sortable: true, align: 'center' }

]],

toolbar: [{

text: '立即召唤所选基站',

iconCls: 'icon-add',

handler: function () {

var ids = [];

var rows = $('#List').datagrid('getChecked');

for (var i = 0; i < rows.length; i++) {

ids.push(rows[i].StationId);

}

alert(ids);

}

}, '-',

{

text: '显示隐藏项',

iconCls: 'icon-edit',

handler: function () {

OpenGetShowColumnDlg();

}

]

});

function OpenGetShowColumnDlg() {

$('#GetShowColumn').dialog('open').dialog('setTitle', '设置显示隐藏列');

}

function hideColumn() {

var cbx = $("#GetShowColumn_Form input[type='checkbox']"); //获取Form里面是checkbox的Object

var checkedValue = "";

var unCheckValue = "";

for (var i = 0; i < cbx.length; i++) {

if (cbx[i].checked) {//获取已经checked的Object

if (checkedValue.length > 0) {

checkedValue += "," + cbx[i].value; //获取已经checked的value

}

else {

checkedValue = cbx[i].value;

}

if (!cbx[i].checked) {//获取没有checked的Object

if (unCheckValue.length > 0) {

unCheckValue += "," + cbx[i].value; //获取没有checked的value

}

else {

unCheckValue = cbx[i].value;

}

var checkeds = new Array();

if (checkedValue != null && checkedValue != "") {

checkeds = checkedValue.split(',');

for (var i = 0; i < checkeds.length; i++) {

$('#List').datagrid('showColumn', checkeds[i]); //显示相应的列

}

var unChecks = new Array();

if (unCheckValue != null && unCheckValue != "") {

unChecks = unCheckValue.split(',');

for (var i = 0; i < unChecks.length; i++) {

$('#List').datagrid('hideColumn', unChecks[i]); //隐藏相应的列

}

$('#GetShowColumn').dialog('close');

}

//全选

function ChooseAll() {

$("#GetShowColumn_Form input[type='checkbox']").attr("checked", "checked");

}

//取消全选

function ClearAll() {

$("#GetShowColumn_Form input[type='checkbox']").removeAttr("checked", "checked");

}

function MoreInfo(rowIndex, rowData) {

return '<a href="javascript:fAlert(' + rowData.StationId + ')">详细</a>';

}

function fAlert(id) {

alert('这里用于以后详细信息拓展,点击的行的ID为:'+id);

}

来自为知笔记(Wiz)

Easyui datagrid 显示隐藏列的更多相关文章

easyUi DataGrid 显示日期列,时间为空也可，的正常显示，及普通居中列情况
$('#tt').datagrid({ url: '@Url.Content("~/kpi/FindList")', w ...
Ext根据条件显示隐藏列
Ext根据条件显示隐藏列写在ExtonReady函数里面,并在表格成功渲染之后,可以添加判断是否隐藏或者显示某一列 /* 判断是否显示版本号一列 */ var showVersionFlag = ' ...
完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
需求&场景例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...
(转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
Excel如何显示隐藏列？
我们在工作中遇到excel表格数据太多比较负责,同时字段太多需要隐藏一些不重要的字段方便阅读和分析其他数据那么我们如何取消隐藏数据呢?隐藏列比较简单选中点隐藏就可以了,取消隐藏需要一些小的技巧才能灵活 ...
easyui datagrid显示进度条控制操作
在当我们需要控制时间前台实际项目页面datagrid显示进度条的数据加载时运行,和datagrid默认情况下只在有url加载运行时的数据显示方式的进度条.下面的代码手动控制: 打开一个进度条: $(' ...
扩展-Easyui Datagrid相同连续列合并扩展（一）
一.autoMergeCellAndCells实现效果调用方法: function onLoadSuccess(data){ $(this).datagrid("autoMerge ...
EasyUI DataGrid 相同连续列合并
扩展方法:$.extend($.fn.datagrid.methods, { autoMergeCells: function(jq, fields) { return jq.each(functio ...
【技巧】easyUI datagrid在隐藏时加载，显示时无法加载出界面
注意在显示时调用再调用一次resize就可以显示出来 $("#"+datagridId).datagrid("resize");

随机推荐

Java_位运算(移位、位与、或、异或、非）
public class Test { public static void main(String[] args) { // 1.左移( << ) // 0000 0000 0000 0 ...
iOS中将颜色转化成图片
定义一个类方法: 声明: + (UIImage *)imageFromColor:(UIColor *)color; 实现: + (UIImage *)imageFromColor:(UIColor ...
form操作
1, /* 封装操作表单的常用方法 */ //获取要保存的数据 wjh 2015-10-22 function getSaveData(className) { if (className == nu ...
mac安装虚拟机
1. 安装VirtualBox 2. 新建,按照步骤一步步选择 3.安装系统镜像 xp_sp3_74070.iso CN_WIN7_SP1_X64_33in1_V1.2.iso 设置磁盘分区等 4.V ...
JavaScript固定宽高
固定高宽: <script type="text/javascript"> if (/Android (\d+\.\d+)/.test(navigat ...
安装OS X虚拟机错误vcpu-0:VERIFY vmcore/vmm/main/physMem_monitor.c:1123
新建一个虚拟机, 选择客户机操作系统为Apple MacOS X 10.10, 其余参数可以默认. 注意建好之后不要急着打开客户机, 因为直接打开你会发现新建的客户机将会无法启动. 仔细阅读Mac O ...
Javascript外部对象
Window 浏览器: - location:地址 - history:历史 - Document:文档 - screen:窗口 - navigator:帮助 > 1.外部对象就是浏览器提供的A ...
SDOI 2016 数字配对
题目大意:给定n个数字以及每个数字的个数和权值,将满足条件的数字配对,使得总代价不小于0,且配对最多最大费用最大流拆点,对于每个点,连一条由S到该点的边,容量为b,花费为0,再连一条到T的边对于每 ...
Extjs扩展：封装Plupload
关于Plupload Plupload是一个web文件上传组件,支持通过HTML5.Silverlight.Flash或者普通的form来上传文件,提供了过滤文件类型.设置上传文件大小.上传进度.针对 ...
linux查看发行版本
redhat系 cat /etc/redhat-release 其他 lsb_release -a

Easyui datagrid 显示隐藏列

Easyui datagrid 显示隐藏列的更多相关文章

随机推荐

热门专题