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);
        }
上一篇:[Android Pro] Android权限设置android.permission完整列表


下一篇:Android权限设置android.permission完整列表