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

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

表 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 = [];
 11
 12 var columnPicker;
 13 $(function() {
 14     data = 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 = [];
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 = {};
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 }
时间： 2024-12-01 02:43:34

jQuery插件SlickGrid --- 保存用户的列定义的相关文章

jQuery 操作cookie保存用户浏览信息

使用jQuery操作cookie之前需要引入jQuery的一个cookie小组件js,代码如下: /*         jQuery cookie plugins */jQuery.cookie = function(name, value, options) {     if (typeof value != 'undefined') { // name and value given, set cookie         options = options || {};         i

jQuery插件 SlickGrid 复制单元格内容

JSP代码 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q

如何去定义一个jquery插件

扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: 1 2 3 4 5 6 7 /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ f

2014年25 款最新最棒的jQuery插件

网络上提供了大量非常有用的 jQuery 插件,帮助大家完善网站的体验.所以我们在这里收集了 2014 年发布的,并且是非常有用的插件,希望能帮助大家找到自己需要并且喜欢的,提升网站的质量! HAMMER JS PAPA PARSE PAPAPARSE 是强大,浏览器内置的 CSV 解析器. BLURR Horwheel Component Animsition Animsition 是简单,易用的 jQuery 插件,用来在 CSS 动画隐藏 xs 的页面转换中添加 br 类. LADDA B

不定义JQuery插件 不要说会JQuery

二.普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义与调用: /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1:

不定义JQuery插件，不要说会JQuery

一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义

[转]不定义JQuery插件，不要说会JQuery

一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义

jQuery插件定义

一:导言 有些WEB开发者,会引用一个jQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuer

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主