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

随机推荐

linux install mysql
sudo apt-get install mysql-server #此处会输入root的密码,设置的密码要记住 sudo apt-get install mysql-client sudo apt- ...
c# 局域网文件传输实例
一个基于c#的点对点局域网文件传输小案例,运行效果截图 //界面窗体 using System;using System.Collections.Generic;using System.Compon ...
BIT 树状数组详解及例题
(一)树状数组的概念如果给定一个数组,要你求里面所有数的和,一般都会想到累加.但是当那个数组很大的时候,累加就显得太耗时了,时间复杂度为O(n),并且采用累加的方法还有一个局限,那就是,当修改掉数组 ...
PHP 之 CURL 模拟登陆并获取数据
1.CURL模拟登陆的流程和步骤 2.tempnam 创建一个临时文件 3.使用CURL模拟登陆到PHP100论坛 <?php $cookie_file = tempnam('./temp',' ...
jsp和mysql乱码
jsp页面,mysql页面上的中文不显示为乱码,各个地方使用的编码(如UTF-8,GB18030,GBK等)的编码保持一致即可. 1. jsp页面的编码: <%@page language=&q ...
replace实现正则过滤替换非法字符
html+js结构如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
关于[super dealloc]
销毁一个对象时,需要重写系统的dealloc方法来释放当前类所拥有的对象,在dealloc方法中需要先释放当前类中所有的对象,然后再调用[super dealloc]释放父类中所拥有的对象.如先调用[ ...
Asp,Net里的Form表单
1.Form表单是页面与Web服务器交互过程中最重要的信息来源. 2.<form action="传到哪个页面的网站地址" method="post和get 两种方 ...
SQL Server 求结果
;with cte as ( select CONVERT(DATE, DATEADD(DAY, -9, GETDATE())) as paytime union all select datead ...
AJXA！让体验更美好
AJXA = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服 ...

Easyui datagrid 显示隐藏列

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

随机推荐

热门专题