Easyui datagrid 显示隐藏列
html:
<div style="float: left; width: 1450px; height:auto; ">
<table id="List" class="easyui-datagrid" title="基站信息列表" width="1450px" style="height:580px;" data-options="rownumbers:true,pagination:true,pageSize:20,pagePosition:'top',striped:true,url:'MonitoringOfListType.aspx'">
<thead>
<tr>
<%-- <th data-options="field:'StationId',checkbox:true,sortable:true,width:50,align:'center'">
ID
</th>
<th data-options="field:'StationName',sortable:true,width:100,align:'center'">
基站名称
</th>--%>
<th data-options="field:'LineName',sortable:true,width:110,align:'center'">
回路名称
</th>
<th data-options="field:'SIM_Number',sortable:true,width:100,align:'center'">
SIM卡号
</th>
<th data-options="field:'GPRS_Status',sortable:true,width:65,align:'center'">
GPRS状态
</th>
<th data-options="field:'MeterStatus',sortable:true,width:60,align:'center'">
电表状态
</th>
<th data-options="field:'ElePreHour',sortable:true,width:95,align:'center'">
上一小时用电量
</th>
<th data-options="field:'EleCurHour',sortable:true,width:85,align:'center'">
本小时用电量
</th>
<th data-options="field:'ElePreDay',sortable:true,width:85,align:'center'">
昨天用电量
</th>
<th data-options="field:'EleCurDay',sortable:true,width:85,align:'center'">
今天用电量
</th>
<th data-options="field:'ElePreMonth',sortable:true,width:85,align:'center'">
上月用电量
</th>
<th data-options="field:'EleCurMonth',sortable:true,width:85,align:'center'">
本月用电量
</th>
<th data-options="field:'Ia',sortable:true,width:50,align:'center'">
Ia
</th>
<th data-options="field:'Ib',sortable:true,width:50,align:'center'">
Ib
</th>
<th data-options="field:'Ic',sortable:true,width:50,align:'center'">
Ic
</th>
<th data-options="field:'Ua',sortable:true,width:50,align:'center'">
Ua
</th>
<th data-options="field:'Ub',sortable:true,width:50,align:'center'">
Ub
</th>
<th data-options="field:'Uc',sortable:true,width:50,align:'center'">
Uc
</th>
<th data-options="field:'P',sortable:true,width:50,align:'center'">
P
</th>
<th data-options="field:'E',sortable:true,width:50,align:'center'">
E
</th>
<th data-options="field:'Ranking',sortable:true,width:85,align:'center',hidden:true">
能耗排名
</th>
<th data-options="field:'EnergyLevel',sortable:true,width:85,align:'center',hidden:true">
能耗等级
</th>
<th data-options="field:'InfoID',sortable:true,width:85,align:'center',formatter:MoreInfo">
详细信息
</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">
<form id="GetShowColumn_Form" method="post" novalidate>
<input type="hidden" id="hideValues" />
<input type="hidden" id="showValues" />
<div class="fitem">
<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>
<input type="checkbox" name="MeterStatus" id="MeterStatus" value="MeterStatus" /><label for="MeterStatus">电表状态</label>
</div>
<div class="fitem">
<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>
<div class="fitem">
<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>
<input type="checkbox" name="Ia" id="Ia" value="Ia" /><label for="Ia">Ia</label>
<input type="checkbox" name="Ib" id="Ib" value="Ib" /><label for="Ib">Ib</label>
</div>
<div class="fitem">
<input type="checkbox" name="Ic" id="Ic" value="Ic" /><label
for="Ic">Ic</label>
<input type="checkbox" name="Ua" id="Ua" value="Ua" /><label for="Ua">Ua</label>
<input type="checkbox" name="Ub" id="Ub" value="Ub" /><label for="Ub">Ub</label>
<input type="checkbox" name="Uc" id="Uc" value="Uc" /><label for="Uc">Uc</label>
</div>
<div class="fitem">
<input type="checkbox" name="P" id="P" value="P" /><label
for="Names">P</label>
<input type="checkbox" name="E" id="E" value="E" /><label for="E">E</label>
<input type="checkbox" name="Ranking" id="Ranking" value="Ranking" /><label for="Ranking">能耗排名</label>
<input type="checkbox" name="InfoID" id="InfoID" value="InfoID" /><label for="InfoID">详细信息</label>
</div>
<div class="fitem">
<input type="checkbox" name="LineName" id="LineName" value="LineName" /><label for="LineName">回路名称</label>
<input type="button" value="全选" onclick="ChooseAll()" />
<input type="button" value="清空" onclick="ClearAll()" />
</div>
</form>
</div>
<div id="dlg-GetShowColumn">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="hideColumn()">
保存</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);
}
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");
随机推荐
- Call to undefined function Think\mb_strlen()
在php.ini 中开启php_mbstring.dll 模块后重启 apache
- jquery修改Switchery复选框的状态
script //选择框 var mySwitch; /* * 初始化Switchery * * classNmae class名 */ function initSwitchery(classNam ...
- Excel数据导入数据库的SQL快速生成
=CONCATENATE("insert into table_name(id, code, name, remark) values (uuid(),'",B2,"', ...
- 利用GeoIP数据库及API进行地理定位查询
GeoIP数据库下载地址:http://geolite.maxmind.com/download/geoip/database/GeoLiteCountry/GeoIP.dat.gz. 首先,在Max ...
- Android课程---序列化与反序列化(转)
ava序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java序列化与反序列化?本文围绕这些问题进行了探讨. 1.Java序列化与反序列化 Java序列化是指把Java对象转换为字节序列的 ...
- ABP理论学习之模块系统
返回总目录 本篇目录 模块介绍 生命周期事件 模块依赖 自定义模块方法 模块介绍 ABP提供了构建模块并将这些模块组合起来创建应用的基础设施.一个模块可以依赖另一个模块.一般来说,一个程序集可以认为是 ...
- .NET中提升UAC权限的方法总结
[题外话] 从Vista开始,由于增加了UAC(用户账户控制,User Account Control)功能,使得管理员用户平时不再拥有能控制所有功能的管理员权限了,所以在调用很多比较重要的功能时需要 ...
- Azure PowerShell (12) 通过Azure PowerShell创建SSH登录的Linux VM
<Windows Azure Platform 系列文章目录> 本章将介绍如何使用Azure PowerShell,创建SSH登录的Linux VM 前提要求: 1.安装Azure Pow ...
- 剖析twemproxy前言
又是喜闻乐见的新坑,前面的mysql协议,当我在解读go-mysql包的时候,会重新讲到,至于Leetcode的更新会与go语言同步.关于这个redis的新坑,目前打算通过剖析twemproxy源码来 ...
- CSS学习笔记2-2d变换和过渡属性
前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...