jqgrid columnChooser列的自定义及存储和获取

jggrid可以通过setcolumns设置列的自定义显示，不过这种方法已经被否决了,现在的方法是columnChooser。我们的问题是既然用户可以选择需要显示和隐藏那些列，那么是否可以把这些信息都存储起来，在用户再次打开这些表时，可以显示对应的列。有很多种方式存储这个数据，可以用浏览器本地存储localstorage,但是问题是当用户换了浏览器或者电脑时就不行了，现在以用mysql存储作为例子。selectColumn用于获取需要隐藏的列，并存入数据库。getHiddencolumn用于获取该表的信息和对表的部分列进行隐藏。

/*** Multiselect save and get cloumn information ** @author cc_fys*/function selectColumn(tableName,pageName,myID){console.log(tableName);$(tableName).jqGrid('navGrid',pageName,{add:false,del:false,edit:false,search:false,refresh:false}); $(tableName).jqGrid('navButtonAdd', pageName, {caption: "隐藏显示列",buttonicon: "ui-icon-calculator",title: "选择列", onClickButton: function () {$(tableName).jqGrid('columnChooser',{width: 550, dialog_opts: {modal: true,minWidth: 470,height: 470,show: 'blind',hide: 'explode',dividerLocation: 0.5},done : function (perm) {if (perm) {//点击确定 this.jqGrid("remapColumns", perm, true);var width = $(window).width()-150;   $(tableName).setGridWidth(width,true); //要存的就json,已经 隐藏部分的部分  //获取列名  var colModel=$(tableName).jqGrid('getGridParam','colModel');  var newColumnName = [];  for (var i=0;i<colModel.length;i++)   {  var columnHidden = colModel[i].hidden;   if(columnHidden==true)  {  // newColumnName.push(colNames[i]);  newColumnName.push(i);  }  } var strHidden=JSON.stringify(newColumnName);console.log(strHidden);//数据库存储$.ajax({type : "POST",url : "myurl",data:{serverID:myID,hiddenC:strHidden},success : function(data) {console.log('finish');}});}}});}});  };function getHiddencolumn(tableName,myID){$.ajax({type : "POST",url : "myurl",data:{serverID:myID},success : function(data) {console.log(data);if(data&&data!=''&&data!='[]')//这里做隐藏列{var jsonData=JSON.parse(data);var colModel=$(tableName).jqGrid('getGridParam','colModel'); jsonData.forEach(function(item,index){//console.log(colModel[item].name);$(tableName).setGridParam().hideCol(colModel[item].name).trigger("reloadGrid");});//调整宽度var width = $(window).width()-150;   $(tableName).setGridWidth(width,true); } }});};

package ciss.controller.savecolumn;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.cxf.common.classloader.FireWallClassLoader;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import ciss.web.jdbc.MySQL;@Controller
@RequestMapping("/mysql")
public class SaveColume {@ResponseBody@RequestMapping(value = "/setHiddenColumn")//这个改为分以下两步，//没有列话就先添加一列之后再存数据//没有用户的话添加一行用户//有用户有行之后才更新public String setHiddenColumn(HttpServletRequest request, HttpServletResponse response) {String ID=request.getParameter("serverID");String userName=request.getSession().getAttribute("userName").toString();String hiddenColume=request.getParameter("hiddenC");//String sql= "insert into hide_column(username,c"+ID+") values(?,?)"; String sql="UPDATE hide_column set c"+ID+"='"+hiddenColume+"' where username='"+userName+"'";  //System.out.println(sql);Connection conn = MySQL.getConnection();if(addUserAndRow(conn,userName,ID)){try {  PreparedStatement ps = conn.prepareStatement(sql);  ps.executeUpdate();  System.out.println("添加成功！");  return "finish";}catch (SQLException e) {e.printStackTrace();return "更改数据失败！";}}else{return "创建列或用户出错啦！";}}@ResponseBody@RequestMapping(value = "/getHiddenColumn")public String getHiddenColumn(HttpServletRequest request, HttpServletResponse response) {ResultSet resultSet;String result="[]";String ID=request.getParameter("serverID");String userName=request.getSession().getAttribute("userName").toString();System.out.println(ID);System.out.println(userName);String sql= "select * from hide_column where username='"+userName+"'"; System.out.println(sql);Connection conn = MySQL.getConnection();try {PreparedStatement ps = conn.prepareStatement(sql);  resultSet = ps.executeQuery(sql);if(isExistColumn(resultSet,"c"+ID)){resultSet.first();System.out.println(resultSet.getString("c"+ID));result=resultSet.getString("c"+ID);}resultSet.close();//conn.close();  }catch (Exception e) {e.printStackTrace();}return result;}//这个是用来创建表的，一般情况下不要调用！public String addHiddenColumn(HttpServletRequest request, HttpServletResponse response) {Connection conn = MySQL.getConnection();for(int i=200;i<=1000;i++){String sql="alter table hide_column add c"+i+" varchar(255) default '[]'";  System.out.println(sql);try {  PreparedStatement ps = conn.prepareStatement(sql);  ps.executeUpdate();  }catch (SQLException e) {e.printStackTrace();}}return "finish";}//查看 是否有某一列public boolean isExistColumn(ResultSet rs, String columnName) {  try {  if (rs.findColumn(columnName) > 0 ) {  return true;  }   }  catch (SQLException e) {  return false;  }  return false;  } //添加指定用户 或者 指定字段public boolean addUserAndRow(Connection conn,String userName,String rowName) {  try {  String sql= "select * from hide_column where username='"+userName+"'"; PreparedStatement ps = conn.prepareStatement(sql);  ResultSet rs= ps.executeQuery(sql);if(isExistColumn(rs,"c"+rowName)==false){//添加新列String sql1="alter table hide_column add c"+rowName+" varchar(255) default '[]'";  PreparedStatement ps1 = conn.prepareStatement(sql1);  ps1.executeUpdate(); }if(rs.next()){System.out.println("不用添加用户");}else {//添加新用户String sql2= "insert into hide_column(username,c"+rowName+") values(?,?)"; System.out.println(sql2);PreparedStatement ps2 = conn.prepareStatement(sql2);  ps2.setString(1, userName);ps2.setString(2, "[]");ps2.executeUpdate(); }return true;}  catch (SQLException e) {  return false;  }  } }

存储的数据像这样，前端比较好处理

最后只需要在表格初始化的地方调用就可以了，非常简便。其中需要传递表格ID，page的ID，以及该表的标识符。

getHiddencolumn('#tables0',1367);
selectColumn('#tables0','#page0',1367);

jqgrid columnChooser列的自定义及存储和获取相关推荐

自定义会话状态存储提供程序
原文:自定义会话状态存储提供程序自定义会话状态存储提供程序此版本程序只是说明自定义会话可以放在不同的地方, 可以改造成把会话分布式存储等. 一.Web.config <ses ...
mysql自定义两个条件排序_使用MySQL中的两个不同列进行自定义排序？
为此,将ORDER BY子句与CASE语句一起使用.让我们首先创建一个表-mysql> create table DemoTable1610 -> ( -> Marks int, - ...
乌班图安装mysql 目录_Ubuntu 安装mysql 自定义数据存储目录
一.安装 apt-get install mysql-server 执行过程如下: root@duke:~# apt-get install mysql-server 正在读取软件包列表... 完成 ...
查询mysql 中的空文本_MySQL查询以显示空列的自定义文本
让我们首先创建一个表-mysql> create table DemoTable -> ( -> FirstName varchar(20) -> ); 使用插入命令在表中插入 ...
解决jQgrid 设置列宽度自动调整时, 出现滚动条问题.
解决jQgrid 设置列宽度自动调整时, 出现滚动条问题. 参考文章: (1)解决jQgrid 设置列宽度自动调整时, 出现滚动条问题. (2)https://www.cnblogs.com/piao ...
AntDesignVue表格中列的自定义隐藏与展示
Vue版本:2.6.x,AntDesignVue版本:1.7.x 在工作中难免会遇到这种情况,较多列的表格展示,如果只想看某些关键列的数据,就需要用到筛选,官方文档的筛选是针对行的数据筛选,没有对列筛 ...
Android 文件外/内部存储的获取各种存储目录路径
前言对于任何一个应用来说,无论是PC端应用还是Android应用,存储肯定是必不可少的.对于很多做Android开发的同学来说,可能认为文件存储很简单,调用一些诸如getFilesDir,getEx ...
转--Android 文件外/内部存储的获取各种存储目录路径
前言对于任何一个应用来说,无论是PC端应用还是Android应用,存储肯定是必不可少的.对于很多做Android开发的同学来说,可能认为文件存储很简单,调用一些诸如getFilesDir,getEx ...
封装的cookie存储、获取、删除方法
2019独角兽企业重金招聘Python工程师标准>>> 封装的cookie存储.获取.删除方法 1.设置cookie function setCookie(key, value, t ...

jqgrid columnChooser列的自定义及存储和获取

jqgrid columnChooser列的自定义及存储和获取相关推荐

最新文章

热门文章