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[n]);
jsonBuilder.append("\",");
jsonBuilder.append("\"title");
jsonBuilder.append("\":\"");
jsonBuilder.append(arrayOfTitle[n]);
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的格式需要格外注意不要弄錯了。