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

}

来自为知笔记(Wiz)

时间： 2024-08-08 21:38:28

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

easyui datagrid显示进度条控制操作

在当我们需要控制时间前台实际项目页面datagrid显示进度条的数据加载时运行,和datagrid默认情况下只在有url加载运行时的数据显示方式的进度条.下面的代码手动控制: 打开一个进度条: $('#searchAddrDg').datagrid('loading');//打开等待div 关闭进度条: $('#searchAddrDg').datagrid('loaded');//关闭loding进度条: 假设以上代码对您有帮助请点赞哦..转载请著名出处http://blog.csdn.net

EasyUI datagrid动态添加列

任务描述:根据用户选择时间段,生成列数据,如图 一.先定义好datagrid固定的数据列 <script type="text/javascript"> $(document).ready(function () { $("#td_Radio").datagrid({ striped: true, border: true, iconCls: 'icon-edit', //图标 singleSelect: true, autoRowHeight: tru

easyui1.32 dataGrid显示-隐藏会出现显示不全问题

场景:tab切换,每个tab里用div放一个dataGrid,默认display:none隐藏,当display:'block'的时候,dataGrid会显示不全,仅显示一条线.解决方法:切换到当前tab的时候执行方法 $("#tableid").datagrid("resize");即可解决. http://bbs.csdn.net/topics/390666562

easyui datagrid 表格组件列属性formatter和styler使用方法

明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格的结构有所区别.我们所有内容单元格的默认DOM结构如下: 1 2 3 4 5 <td field="code">     <div style="text-align:left" class="datagrid-cell datagrid-cell

Easyui Datagrid相同连续列合Demo之三

效果图: html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Merge Cells for DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes

Easyui Datagrid相同连续列合Demo（二）

效果图: html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Merge Cells for DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes

EasyUI DataGrid动态修改列标题

var option = $('#tt').datagrid("getColumnOption", "列名") option.title = "新的列名"; $('#tt').datagrid(); 其实就是先获取到列的数据信息,修改,重置. 看下官方的说明,如下,

easyui datagrid自定义按钮列,即最后面的操作列

在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现首先是HTML部分 <table id="tt" class="easyui-datagrid" style="width:100%;height:554px"             singleSelect="false"              fitColumns="true"    

datagrid 显示隐藏 工具栏按钮

function loadData(pars, url) { $('#data').datagrid({ url: url, ........ ........ , onLoadSuccess: function (data) { if (comBoxName1 == "1" || comBoxName1=="2") { $('#btnID').hide(); } else { $('#btnID').show(); } } , toolbar: [ { text: