Easyui datagrid 显示隐藏列

时间：2014-12-10 10:44:29 阅读：399 评论：0 收藏：0 [点我收藏+]

标签：style http io ar color os sp for java

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 显示隐藏列

标签：style http io ar color os sp for java

原文地址：http://www.cnblogs.com/nangong/p/5a0e36de5316a97902673428d77b945d.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行