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");
随机推荐
- JavaScript 中string方法
注意:JavaScript的字符串是不可变的(immutable),String类定义的方法不能改变原来字符串内容,例如String.toUpperCase()这样的方法,返回的是全新的字符串,而不是 ...
- js 继承 对象方法与原型方法
js函数式编程确实比很多强语言使用灵活得多,今天抽了点时间玩下类与对象方法调用优先级别,顺便回顾下继承 暂时把原型引用写成继承 先看看简单的两个继承 var Parent = function(){} ...
- 爬虫笔记(四)------关于BeautifulSoup4解析器与编码
前言:本机环境配置:ubuntu 14.10,python 2.7,BeautifulSoup4 一.解析器概述 如同前几章笔记,当我们输入: soup=BeautifulSoup(response. ...
- 对Java初学者的忠告
1) 适合自己的图书才是最好的,最好的书并不一定适合你,看自己的情况. 如果你是一个Java初学者一上手就捧一本Thinking in Java在手里,我想你的日子是不会好过的,那样的书给有一定基础的 ...
- C\C++ 生成各位数不相等的随机数
最近想写一个1A2B的小游戏来练习一下,结果在第一步生成随机数的时候就遇到了一点点问题. 游戏初始化时需要先生成一个四位随机数,且各位各不相等.于是最开始的思路是生成一个整数数组,只需要判断生成的随机 ...
- weblogic 12c web部署注意的问题
废话不多说下面讲介绍他的具体部署web应用,应该注意哪些问题. 准备工作: Java JDK 安装及环境配置 http://jingyan.baidu.com/article/ff41162596a7 ...
- ASP.NET关于对excel数据导入到数据库
//*******************************C#(UI代码)********************************/ Web界面上放一个FileUpload 名称为:F ...
- Java Web项目报错java.lang.NullPointerException at org.apache.jsp.front.index_jsp._jspInit(index_jsp.java:30)
环境:myeclipse+tomcat6+jdk6 今天搭建了一个Java Web项目,访问index.jsp时报如下错误: 严重: Servlet.service() for servlet jsp ...
- ASP.NET MVC 和 Ruby 相结合的Web框架Oak
在http://www.asp.net/mvc/open-source 上有个项目Oak: Frictionless development for ASP.NET MVC single page w ...
- 【性能为王】从PHP源码剖析array_keys和array_unique
之前在[译]更快的方式实现PHP数组去重这篇文章里讨论了使用array_flip后再调用array_keys函数替换直接调用array_unique函数实现数组去重性能较好.由于原文没有给出源码分析和 ...