jQuery插件SlickGrid --- 保存用户的列定义
浏览数：172 /
时间：2015年06月09日
数据库表定义的话大概是这样的
表 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 }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
