首页 > 代码库 > jQuery插件SlickGrid --- 保存用户的列定义
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 =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 --- 保存用户的列定义
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。