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