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

随机推荐

jquery常见获取高度
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
Jenkins部署配置简介
前段时间研究了一下自动化测试,因而接触到了Jenkins,今天有时间进行一下Jenkins部署配置相关知识的总结分享前言:由于本次只是实验性研究,采用Windows环境,因此Jenkins可以通过下 ...
解决WARN: Timeout/setRollbackOnly of ACTIVE coordinator !的问题
该问题是CoordinatorImp上面的一个定时器造成的,一个活动的session如果在一定的时间内没有执行完毕就会rollback,就算没有sql执行也会不断的进行. 可以参考该链接:https: ...
太极旋转-JS实现
刚学了js的一些函数,所以做了一个太极的旋转.做完之后是上面这个样子的,是可以旋转的. 思路: 1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动. 2.画两个半圆,主要属性是border-to ...
【安装mysql】windows安装压缩版mysql5.7.15
160915.1459 综述中午安装成功,但是启动失败,很可能是压缩包有问题(从别人拷的),解决了近一个小时,没搞定,于是换条方案,重新去官网下载压缩包,这次看准了windows架构,且64-b ...
Oracle like查询
查询方式:LIKE '%xx%' 普通: SELECT * FROM TABLE T WHERE T.COLUNM LIKE '%xx%' 优化:使用 INSTR SELECT * FROM TABL ...
Eclipse上安装GIT插件EGit及使用
一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...
HDFS Client 设计实现解析
前面对 HDFS NameNode 和 DataNode 的架构设计实现要点做了介绍,本文对 HDFS 最后一个主要构成组件 Client 做进一步解析. 流式读取 HDFS Client 为客户端应 ...
体验 ASP.NET Core 1.1 中预编译 MVC Razor 视图
这是从 ASP.NET Core 1.1 官方发布博文中学到的一招,可以在 dontet publish 时将 Razor 视图编译为 .dll 文件. 需要在 project.json 中添加如下配 ...
DDD实践问题之 - 关于论坛的帖子回复统计信息的更新的思考
之前,在用ENode开发forum案例时,遇到了关于如何实现论坛帖子的回复的统计信息如何更新的问题.后来找到了自己认为比较合理的解决方案,分享给大家.也希望能和大家交流,擦出更多的火花. 论坛核心领域 ...

Easyui datagrid 显示隐藏列

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

随机推荐

热门专题