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 + ')" target="_blank" rel="external nofollow" >詳細</a>'; } function fAlert(id) { alert('這裡用于以後詳細資訊拓展,點選的行的ID為:'+id); }
來自為知筆記(Wiz)
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)