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");

随机推荐

锁（MySQL篇）—之MyISAM表锁
前言锁是计算机协调多个进程或线程并发访问某一资源的机制,在数据库中,除传统的计算资源(如CPU.RAM.I/O等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性.有效性是 ...
[译]git log进阶
格式化log输出 oneline --oneline标记将每个commit压缩成一行. 默认情况下显示一个commit ID和commit描述的第一行. 输出如下: 0e25143 Merge bra ...
程序员带你十天快速入门Python,玩转电脑软件开发（四）
本系列文章立志于从一个已经习得一门编程语言的基础之上,全面介绍Python的相关开发过程和相关经验总结.本篇文章主要是基于上一篇的程序员带你十天快速入门Python,玩转电脑软件开发(三)的基础之上, ...
转&colon;PHP之Traits
原文来自于:http://www.cnblogs.com/tekkaman/archive/2012/12/12/2814214.html 1.Traits基础 2.优先级:当前类中的方法会覆盖 Tr ...
01&period;Net入门知识
1..Net学习路线及几个容易混淆的概念 .Net只是一个平台,提供运行.Net程序需要的虚拟机.类库等 C#就是.Net平台下的一个开发语言,.Net下的语言还有VB.Net.PowerShell等 ...
OpenCascade
Hello World of OpenCascade Hello World of OpenCascade eryar@163.com 摘要Abstract:以一个经典的Hello World程序 ...
关于pagerank算法的一点点总结
1. PageRank算法每个顶点收敛的值与每个点的初值是没有关系的,每个点随便赋初值. 2.像q=0.8这样的阻尼系数已经解决了PageRank中处在的孤立点问题.黑洞效应问题. 3.当有那个点进行 ...
Omi v1&period;0&period;2发布 - 正式支持传递javascript表达式
原文地址:https://github.com/AlloyTeam/omi/ 写在前面 Omi框架可以通过在组件上声明 data-* 把属性传递给子节点. Omi从设计之初,就是往标准的DOM标签的标 ...
hdu2062 Subset sequence----递推
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2062 题目大意: 给出n和m,集合{1,2,,,,n}的非空子集,按照一定方式排列,例如n==3时, ...
js精度溢出解决方案
一般参数值不能超过16位.如果超出16都是用0替代,导致我们查询不到自己想要的结果. 遇到此问题我们做如下修改自己写属性原始的: <a href="javascript:void( ...