1. 程式人生 > >easyui中datagrid動態繫結json載入列的解決方案

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的格式需要格外注意不要弄錯了。