最近写一个方案,其中有一个需求是做一个通用的查询界面,根据后台返回的列名和对应的数据动态的构造列表,因为项目用的是基于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关键字从代码中找出对应的构造表格的代码的。