首页 > 代码库 > jQuery插件SlickGrid --- 保存用户的列定义

jQuery插件SlickGrid --- 保存用户的列定义

2024-08-01 05:37:17   223人阅读

 

数据库表定义的话大概是这样的

表 t_usersetting

id  varchar2(50)  PK

userid　　varchar2(50)

pageid　　varchar2(50)

 

 

表t_slickgridcolumndefinition

id  varchar2(50)  PK

columnid　　varchar2(50)

columnwidth  NUMBER(3)

columnshow  char(1)

usersettingid  varchar2(50)  FK 

 

 

JSP代码

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2     pageEncoding="UTF-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <c:set var="ctx" value="<%=request.getContextPath()%>"></c:set> 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 6 <html> 7 <head> 8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 9 <title>SlickGrid</title>10 11 <script src="${ctx}/js/SlickGrid-master/lib/firebugx.js"></script>12 <script src="${ctx}/js/SlickGrid-master/lib/jquery-1.7.min.js"></script>13 <script src="${ctx}/js/SlickGrid-master/lib/jquery-ui-1.8.16.custom.min.js"></script>14 <script src="${ctx}/js/SlickGrid-master/lib/jquery.event.drag-2.2.js"></script>15 16 <script src="${ctx}/js/SlickGrid-master/slick.core.js"></script>17 <script src="${ctx}/js/SlickGrid-master/plugins/slick.checkboxselectcolumn.js"></script>18 <script src="${ctx}/js/SlickGrid-master/plugins/slick.autotooltips.js"></script>19 <script src="${ctx}/js/SlickGrid-master/plugins/slick.cellrangedecorator.js"></script>20 <script src="${ctx}/js/SlickGrid-master/plugins/slick.cellrangeselector.js"></script>21 <script src="${ctx}/js/SlickGrid-master/plugins/slick.cellcopymanager.js"></script>22 <script src="${ctx}/js/SlickGrid-master/plugins/slick.cellselectionmodel.js"></script>23 <script src="${ctx}/js/SlickGrid-master/plugins/slick.rowselectionmodel.js"></script>24 <script src="${ctx}/js/SlickGrid-master/controls/slick.columnpicker.js"></script>25 <script src="${ctx}/js/SlickGrid-master/slick.formatters.js"></script>26 <script src="${ctx}/js/SlickGrid-master/slick.editors.js"></script>27 <script src="${ctx}/js/SlickGrid-master/slick.grid.js"></script>28 <script src="${ctx}/js/SlickGrid-master/slick.dataview.js"></script>29 <script src="${ctx}/js/SlickGrid-master/controls/slick.pager.js"></script>30 <script src="${ctx}/index1.js"></script>31     32 <link rel="stylesheet" href="${ctx}/js/SlickGrid-master/slick.grid.css" type="text/css"/>33 <link rel="stylesheet" href="${ctx}/js/SlickGrid-master/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>34 <link rel="stylesheet" href="${ctx}/js/SlickGrid-master/controls/slick.pager.css" type="text/css"/>35 <link rel="stylesheet" href="${ctx}/js/SlickGrid-master/examples.css" type="text/css"/>36 <link rel="stylesheet" href="${ctx}/js/SlickGrid-master/controls/slick.columnpicker.css" type="text/css"/>37 </head>38 <body>39     <div id="myGrid" style="width:1000px; height:500px; border:1px solid black; margin:auto;"></div>40     <div style="width:100%; height:20px;"></div>41     <div style="width:1000px; height:100px; margin:auto;">42         <input type="button" value="saveColumnsSetting" onclick="saveColumnsSetting();" />43         <input type="button" value="resetColumnsSetting" onclick="resetColumnsSetting();" />44     </div>45 </body>46 <script>47 var ctx = ‘${ctx}‘;48 </script>49 </html>

 

js代码

  1 var grid;  2 var defaultColumns = [];   // 默认设置  3   4 var options = {  5     editable : true,  6     enableCellNavigation : true,  7     asyncEditorLoading : false,  8     autoEdit : false  9 }; 10 var data =http://www.mamicode.com/ []; 11  12 var columnPicker; 13 $(function() { 14     data =http://www.mamicode.com/ createData(); 15     defaultColumns = createColumns(); 16      17     var checkboxSelectColumn = new Slick.CheckboxSelectColumn(options); 18     defaultColumns.unshift(checkboxSelectColumn.getColumnDefinition()); 19      20     /* 21      * 获取用户设置信息 22      */ 23     var userSettings = queryUserColumnsSetting(); 24     // 这个设置给grid 25     var showColumns = []; 26     if(userSettings && userSettings.columnSetting && userSettings.columnSetting.length!=0){ 27         for(var i = 0;i<userSettings.columnSetting.length;i++){ 28             for(var j = 0;j<defaultColumns.length;j++){ 29                 if(userSettings.columnSetting[i][‘id‘]==defaultColumns[j][‘id‘] && userSettings.columnSetting[i].show==true){ 30                     showColumns.push(defaultColumns[j]); 31                 } 32             } 33         } 34     } 35     
　　　　　　if(showColumns.length==0){
　　　　　　　　　showColumns = [].concat(defaultColumns);　
　　　　　　}

 36     grid = new Slick.Grid("#myGrid", data, showColumns, options); 37  38     var rowSelectionModel = new Slick.RowSelectionModel({selectActiveRow : false}); 39     grid.setSelectionModel(rowSelectionModel); 40     grid.registerPlugin(checkboxSelectColumn); 41  42     columnPicker = new Slick.Controls.ColumnPicker(defaultColumns, grid, options); 43  44     grid.onHeaderContextMenu.subscribe(function(e, args) { 45         // 隐藏checkbox,不让进行选择 46         var labels = $(".slick-columnpicker").find(‘li‘).find(‘label‘); 47         $(labels).each(function(index, item) { 48             if (item.innerText == "<input type=‘checkbox‘>") { 49                 item.parentNode.remove(item); 50             } 51         }) 52     }); 53  54     // 提示插件,当文本的内容超过了列的宽度之后,会自动提示，没有超过的不会提示 55     grid.registerPlugin(new Slick.AutoTooltips({enableForHeaderCells : true})); 56      57      58 }) 59  60 function createColumns() { 61     var defaultColumns = []; 62     defaultColumns.push({ 63         id : ‘id‘, 64         name : ‘id‘, 65         field : ‘id‘ 66     }); 67     defaultColumns.push({ 68         id : ‘name‘, 69         name : ‘name‘, 70         field : ‘name‘ 71     }); 72     defaultColumns.push({ 73         id : ‘sex‘, 74         name : ‘sex‘, 75         field : ‘sex‘ 76     }); 77     defaultColumns.push({ 78         id : ‘age‘, 79         name : ‘age‘, 80         field : ‘age‘ 81     }); 82     defaultColumns.push({ 83         id : ‘country‘, 84         name : ‘country‘, 85         field : ‘country‘ 86     }); 87     defaultColumns.push({ 88         id : ‘province‘, 89         name : ‘province‘, 90         field : ‘province‘ 91     }); 92     defaultColumns.push({ 93         id : ‘city‘, 94         name : ‘city‘, 95         field : ‘city‘ 96     }); 97     defaultColumns.push({ 98         id : ‘email‘, 99         name : ‘email‘,100         field : ‘email‘101     });102     defaultColumns.push({103         id : ‘qq‘,104         name : ‘qq‘,105         field : ‘qq‘106     });107     defaultColumns.push({108         id : ‘postcode‘,109         name : ‘postcode‘,110         field : ‘postcode‘111     });112     defaultColumns.push({113         id : ‘phone‘,114         name : ‘phone‘,115         field : ‘phone‘116     });117     118     return defaultColumns;119 }120 121 122 function createData(){123     var data =http://www.mamicode.com/ [];124     for (var i = 0; i < 1000; i++) {125         data.push({126             id:i,127             name:‘name‘+i,128             sex:i % 2 == 0 ? "Male" : "Female",129             age:parseInt(Math.random() * (50 - 18 + 1) + 18),130             city:‘SHENZHEN‘,131             province:‘GD‘,132             country:‘CHINA‘,133             email:‘xxxx‘+i+‘@163.com‘,134             qq:Math.random() * 100000000 + "",135             postcode:‘518049‘,136             phone:Math.random() * 100000000 + ""137         });138     }139     return data;140 }141 142 /**143  * 保存用户的列设置144  * 主要包括以下几点:145  * 列的顺序、列宽、列显示146  */147 function saveColumnsSetting() {148     149     var saveData =http://www.mamicode.com/ {};150     saveData.columnSetting = [];151     saveData.userid = "userid";152     saveData.pageid = "pageid";153     154     155     var showcount = 0;156     var hiddencount = 0;157     158     var allColumns = columnPicker.getAllColumns();159     var showColumns = grid.getColumns();160     for(var i = 0;i<allColumns.length;i++){161         for(var j = 0;j<showColumns.length;j++){162             if(allColumns[i][‘id‘]==showColumns[j][‘id‘]){163                 saveData.columnSetting.push({id:allColumns[i][‘id‘],width:allColumns[i].width,show:true});164                 showcount++;165                 break;166             }else if (j==showColumns.length-1 && allColumns[i][‘id‘]!=showColumns[j][‘id‘]){167                 saveData.columnSetting.push({id:allColumns[i][‘id‘],width:allColumns[i].width,show:false});168                 hiddencount++;169             }170         }171     }172     173     /*174      * 到时候把saveData作为参数传递给controller保存到数据库,待下一次进入到页面的时候,首先就要检查用户是否已经对该页面进行了自定义的列设置175      */176     alert("show columns count : " + showcount + "\n hidden columns count :" + hiddencount );177 }178 179 /**180  * 重置列定义181  */182 function resetColumnsSetting(){183     grid.setColumns(defaultColumns);184     if(window.confirm("是否丢弃用户列设置?")){185         // TODO 删掉数据库信息  186     }187 }188 189 190 /*191  * 查询用户的设置192  * 这里就不查询数据库了,只要模拟一下就好193  */194 function queryUserColumnsSetting(){195     var userSetting = {};196     userSetting.userid ="userid";197     userSetting.pageid = "pageid";198     199     userSetting.columnSetting = [];200     userSetting.columnSetting.push({id:‘_checkbox_selector‘,width:30,show:true});201     userSetting.columnSetting.push({id:‘id‘,width:100,show:false});202     userSetting.columnSetting.push({id:‘name‘,width:110,show:false});203     userSetting.columnSetting.push({id:‘sex‘,width:120,show:false});204     userSetting.columnSetting.push({id:‘country‘,width:120,show:true});205     userSetting.columnSetting.push({id:‘province‘,width:120,show:true});206     userSetting.columnSetting.push({id:‘city‘,width:120,show:true});207     userSetting.columnSetting.push({id:‘age‘,width:120,show:true});208     userSetting.columnSetting.push({id:‘email‘,width:120,show:true});209     userSetting.columnSetting.push({id:‘qq‘,width:120,show:true});210     userSetting.columnSetting.push({id:‘postcode‘,width:120,show:true});211     userSetting.columnSetting.push({id:‘phone‘,width:120,show:true});212     213     return userSetting;214 }

 

 

 1 public class SlickGridColumnDefinition { 2     private String columnid; 3     private String columnWidth; 4     private boolean show; 5  6     public String getColumnid() { 7         return columnid; 8     } 9 10     public void setColumnid(String columnid) {11         this.columnid = columnid;12     }13 14     public String getColumnWidth() {15         return columnWidth;16     }17 18     public void setColumnWidth(String columnWidth) {19         this.columnWidth = columnWidth;20     }21 22     public boolean isShow() {23         return show;24     }25 26     public void setShow(boolean show) {27         this.show = show;28     }29 30 }
 1 public class UserSettings { 2     private String userid; 3     private String pageid; 4     private List<SlickGridColumnDefinition> cs; 5  6     public String getUserid() { 7         return userid; 8     } 9 10     public void setUserid(String userid) {11         this.userid = userid;12     }13 14     public String getPageid() {15         return pageid;16     }17 18     public void setPageid(String pageid) {19         this.pageid = pageid;20     }21 22     public List<SlickGridColumnDefinition> getCs() {23         return cs;24     }25 26     public void setCs(List<SlickGridColumnDefinition> cs) {27         this.cs = cs;28     }29 30 }

 

jQuery插件SlickGrid --- 保存用户的列定义


联系
我们