easyui中datagrid动态绑定json加载列的解决方案

在做项目中有这样一个问题：在前台输入sql语句，传入后台后获得数据，将数据绑定在datagrid上显示。

这个问题困扰我很久，因为如果是传入sql语句的话，很难确定是哪个表，也不好确定到底有多少列，所以无法使用实体类来获得数据，解析sql语句的话……..太不现实了。但是如果单纯使用resultset来传递，又太散列了，所以最后决定用

ArrayList<Map<String,String>>

来获取经sql语句执行后获得的数据，其中，arraylist中有6个map，每个map是一条数据记录：

{"id":"6","typecode":"PA","codename":"普通职工","typename":"权限分配","code":"0"},

{"id":"7","typecode":"PA","codename":"组长","typename":"权限分配","code":"1"},

{"id":"8","typecode":"PA","codename":"管理员","typename":"权限分配","code":"2"},

{"id":"9","typecode":"TG","codename":"一组","typename":"所属组","code":"0"},

{"id":"10","typecode":"TG","codename":"二组","typename":"所属组","code":"1"},

{"id":"11","typecode":"TG","codename":"管理员","typename":"所属组","code":"2"}

然后我写了一个controller函数将这个数组接收并转化为json数据转发给前台jsp文件,主要思想就是拼一个json串：{“rows”:[数据]“title”:[列名]}，这样传给前台的时候直接data.title就能取列名，data.rows就可以取数据了。

public JSONArray selectCode() throws ServletException, IOException{
try {

jsonArray=new JSONArray();
//dbo是执行sql语句的类的一个实例
aList=dbo.selectOneSql(sql);//执行，

jsonArray=JSONArray.fromObject(aList);//转化为jsonArray

} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException ea) {
// TODO Auto-generated catch block
ea.printStackTrace();
}

return jsonArray;//返回一个json字符串，

}

//下面是重点啊
@RequestMapping(value = "/getData.do")

@ResponseBody
public String getData() throws ServletException, IOException{
JSONArray rows=selectCode();//要显示的数据内容，

List<Map<String,Object>> mapListJson = (List)rows;//将json数据先转化为list，方便一会往外拿数据

Map<String,Object> obj=mapListJson.get(0);//主要是为了获取列名

Set key=obj.keySet();//获得列值了
Object[] arrayOfTitle=key.toArray(); //列名已经存在数组里

//拼出一个json串，需要十分注意小心
StringBuilder jsonBuilder = new StringBuilder();//开始拼接
jsonBuilder.append("{\"rows");
jsonBuilder.append("\":");

//把得到的数据直接加进去，需要注意的是此时我的row自带[]所以  没有在前后加“[]”,如果你的没有的话，需要加[]
jsonBuilder.append(rows);

jsonBuilder.append(",");
// System.out.println(jsonBuilder);//要随时观察是否正确
jsonBuilder.append("\"title");
jsonBuilder.append("\":[");
//System.out.println(jsonBuilder);
for (int n = 0; n < arrayOfTitle.length; n++)
{
jsonBuilder.append("{");
jsonBuilder.append("\"field");
jsonBuilder.append("\":\"");
jsonBuilder.append(arrayOfTitle
);
jsonBuilder.append("\",");
jsonBuilder.append("\"title");
jsonBuilder.append("\":\"");
jsonBuilder.append(arrayOfTitle
);
jsonBuilder.append("\"");
jsonBuilder.append("},");
}
//System.out.println(jsonBuilder);
jsonBuilder.deleteCharAt(jsonBuilder.length() - 1);

jsonBuilder.append("]");
jsonBuilder.append("}");

//  System.out.println(jsonBuilder);

return jsonBuilder.toString();

}

在这里，datagrid的field和title用的是同样的内容，如果想要和中文列名对应的话 可能需要一个中文映射表，取出该表的数据后，将中文标题和英文标题放入map，或者只是取出中文的标题放入另外的list这样的数据结构，在拼接json串时取英文列名作为field，用中文做title，因为我项目中只是做一个datagrid做测试之用，所以没有具体实现，如果以后有需要的话再补充。

回到程序，这时候的jsonBuilder内容是这样一个字符串：

//其实是一长串，为了方便看我变成如下的格式，要记住，这个格式十分重要，一定不可以错！！！[]代表数组{}代表对象，这一串是说有一个json对象里有俩数组rows和title，每个数组都有自己的值对象
{
"rows":
[
{"id":"6","typecode":"PA","codename":"普通职工","typename":"权限分配","code":"0"},

{"id":"7","typecode":"PA","codename":"组长","typename":"权限分配","code":"1"},

{"id":"8","typecode":"PA","codename":"管理员","typename":"权限分配","code":"2"},

{"id":"9","typecode":"TG","codename":"一组","typename":"所属组","code":"0"},{"id":"10","typecode":"TG","codename":"二组","typename":"所属组","code":"1"},

{"id":"11","typecode":"TG","codename":"管理员","typename":"所属组","code":"2"}

],
"title":[
{"field":"id","title":"id"},{"field":"typecode","title":"typecode"},{"field":"codename","title":"codename"},{"field":"typename","title":"typename"},{"field":"code","title":"code"}
]
}

好了可以在前台接收数据了，首先要定义一个table元素，其id=dg，

<table id="dg" class="easyui-datagrid"
style="width:700px;height:250px"
data-options="">
</table>

在sql正确执行完毕以后，数据已经取到，用ajax获取后台的字符串并动态绑定datagrid

$.ajax({
type: "post",

url: 'background/Connection/getData.do',//获取数据的函数地址
dataType: "json",
success: function (data) {

var msg = $.parseJSON(data);//将得到的字符串转换为json

$("#dg").datagrid({
columns: [msg.title]    //动态取标题
});

$("#dg").datagrid("loadData", msg.rows);  //动态取数据

}
});

}

好了~大功告成，不吃不睡一天终于搞定了！这下怎么换sql语句都不怕啦哈哈哈哈~~~





多谢博主LiGengMing的启发，这是他日志的链接：

http://www.cnblogs.com/LiGengMing/p/5125031.html

我做了一些改动，主要需要注意的就是json的格式需要格外注意不要弄错了。