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

原创 2016年08月03日 20:26:18

在做项目中有这样一个问题:在前台输入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的格式需要格外注意不要弄错了。

EasyUI datagrid动态加载json数据

具体内容请查看: 点击打开链接
  • u012255097
  • u012255097
  • 2016-11-03 22:14:23
  • 729

EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: ...
  • PRIMEFJT
  • PRIMEFJT
  • 2018-01-12 20:36:43
  • 326

EasyUI DataGrid绑定嵌套的json数据

现有json数据如下: {"total":2,"rows": [{"BarrackGUID":"dc1be891-4489-4eb8-bb1d-ba1debd59b07","BarrackNam...
  • zdhlwt2008
  • zdhlwt2008
  • 2016-10-25 08:53:19
  • 1599

[Javascript][easyui]DataGrid绑定JSON的方法

DataGrid绑定JSON的方法     var json={"total":28,"rows":[ {"productid":"FI-SW-01","unitcost":10.00,"s...
  • szwangdf
  • szwangdf
  • 2012-01-04 21:14:26
  • 19171

SpringMVC与JQuery EasyUI DataGrid传递JSON数据

本文默认您会使用EasyUI, 仅仅讲解如何通过SpringMVC与EasyUI DataGrid传递数据。 思路是:Handler Method返回JSONObject对象,SpringMVC对此...
  • caipengbo
  • caipengbo
  • 2017-03-04 11:34:31
  • 412

easyui datagrid+springmvc+json来进行分页处理

用springmvc+easyui做分页,分页这个问题困扰了我几天,所以现在我把代码给贴出来   步骤:    1.在页面添加easyui的插件(js)    2.定义一个table,看把查询出来的数...
  • rendeyishi
  • rendeyishi
  • 2014-03-11 10:40:25
  • 22734

easyui datagrid 动态表头 动态columns 的一种实现方式

function doUpgradeDataQueryFun(){ var actTypeVal=$("#actType").combobox('getValue'); var actIdVa...
  • big1989wmf
  • big1989wmf
  • 2017-04-12 16:38:23
  • 2198

springmvc+easyui实现透视表-动态生成列

项目需求里面要求实现一个类似于excel里透视表的功能,大致意思就是选择对应的数据库之后,行标签和列标签都是可选的,然后在页面上就生成对应的相关记录。 例如,我选择“财务信息”数据库,列标签选择“部门...
  • tonytfjing
  • tonytfjing
  • 2014-10-11 22:18:18
  • 9429

easyui之datagrid:动态生成列(动态报表)

我们都知道,使用easyui可以很容易的生成datagrid,代码如下: _queryGrid = $("#datagrid_queryReport").datagrid({ url:urljso...
  • liuxiao723846
  • liuxiao723846
  • 2015-05-07 11:56:32
  • 2416

Easyui 动态改变列

Easyui 动态改变列,刷新列头,保留屏蔽层
  • w13528476101
  • w13528476101
  • 2017-12-25 19:35:16
  • 58
收藏助手
不良信息举报
您举报文章:easyui中datagrid动态绑定json加载列的解决方案
举报原因:
原因补充:

(最多只允许输入30个字)