Jquery ui datagrid動態生成列

最近寫一個方案，其中有一個需求是作一個通用的查詢界面，根據後臺返回的列名和對應的數據動態的構造列表，由於項目用的是基於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關鍵字從代碼中找出對應的構造表格的代碼的。