Jquery ui datagrid动态生成列

2019独角兽企业重金招聘Python工程师标准>>>

最近写一个方案，其中有一个需求是做一个通用的查询界面，根据后台返回的列名和对应的数据动态的构造列表，因为项目用的是基于jquery封装的一个前端框架，其中表格用的是jquery ui的datagrid，而jquery的datagrid列名只能是写死的，一开始想到的在初始化datagrid对象之前构造一个ajax请求来获取列名及数据，然后在初始化datagrid时传入从服务端获取到的列名的数组，类似于这样：

$.ajax() {

  success:fuction() {

columns = …..

resultGrid = $.datagrid(){

…

columns:columns

…

}

  }

}

 

但这种方式只能是获取第一页的数据，分页都不能用了，后来在网上找了一下，找到这篇文章：https://www.cnblogs.com/wpcnblog/p/5417123.html

大概思路就是扩展datagrid，增加一个createHeader的方法，在其中实现动态构造表格的逻揖，而这个逻揖基本上就是datagrid生成表的逻揖，可以直接从jquery.ui.js中去抄出来，但这篇文章中的代码我直接拷贝过来用后虽然可以动态生成列，但在调用datagrid的resize方法时总是报没有toLowerCase属性或方法的错误，导致表格中的数据的格式非常难看，跟踪调试后发现我们项目的jquery.ui.js版本与这篇文章不一样而且对它进行了一些修改，所以只能从我们项目的jquery.ui.js中把构造表格的代码给抠出来了，但jquery.ui.js的代码不知什么原因方法和变量都用下划线加数字了，导致可读性非常差，最后是通过<table关键字从代码中找出对应的构造表格的代码的。

转载于:https://my.oschina.net/u/914897/blog/1603097