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,50,align:'center'">

                            ID

                        </th>

                        <th data-options="field:'StationName',sortable:true,100,align:'center'">

                            基站名称

                        </th>--%>

                        <th data-options="field:'LineName',sortable:true,110,align:'center'">

                            回路名称

                        </th>

                        <th data-options="field:'SIM_Number',sortable:true,100,align:'center'">

                            SIM卡号

                        </th>

                        <th data-options="field:'GPRS_Status',sortable:true,65,align:'center'">

                            GPRS状态

                        </th>

                        <th data-options="field:'MeterStatus',sortable:true,60,align:'center'">

                            电表状态

                        </th>

                        <th data-options="field:'ElePreHour',sortable:true,95,align:'center'">

                            上一小时用电量

                        </th>

                        <th data-options="field:'EleCurHour',sortable:true,85,align:'center'">

                            本小时用电量

                        </th>

                        <th data-options="field:'ElePreDay',sortable:true,85,align:'center'">

                            昨天用电量

                        </th>

                        <th data-options="field:'EleCurDay',sortable:true,85,align:'center'">

                            今天用电量

                        </th>

                        <th data-options="field:'ElePreMonth',sortable:true,85,align:'center'">

                            上月用电量

                        </th>

                        <th data-options="field:'EleCurMonth',sortable:true,85,align:'center'">

                            本月用电量

                        </th>

                        <th data-options="field:'Ia',sortable:true,50,align:'center'">

                            Ia

                        </th>

                        <th data-options="field:'Ib',sortable:true,50,align:'center'">

                            Ib

                        </th>

                        <th data-options="field:'Ic',sortable:true,50,align:'center'">

                            Ic

                        </th>

                        <th data-options="field:'Ua',sortable:true,50,align:'center'">

                            Ua

                        </th>

                        <th data-options="field:'Ub',sortable:true,50,align:'center'">

                            Ub

                        </th>

                        <th data-options="field:'Uc',sortable:true,50,align:'center'">

                            Uc

                        </th>

                        <th data-options="field:'P',sortable:true,50,align:'center'">

                            P

                        </th>

                        <th data-options="field:'E',sortable:true,50,align:'center'">

                            E

                        </th>

                        <th data-options="field:'Ranking',sortable:true,85,align:'center',hidden:true">

                            能耗排名

                        </th>

                        <th data-options="field:'EnergyLevel',sortable:true,85,align:'center',hidden:true">

                            能耗等级

                        </th>

                        <th data-options="field:'InfoID',sortable:true,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',  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)