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实现动态加载列并为其绑定数据

最近项目中遇到了这么一个需求,在datagrid中显示的数据需要动态的加载,也就是说表格中显示的列是不固 定的,显示的列的名称和列的数量都是不固定的,这些数据都是需要我们从后台拿来数据然后在动态的绑...
  • u013045437
  • u013045437
  • 2016年03月06日 23:24
  • 4647

easyui datagrid如何加载通过ajax获得的json格式的数据

文章为转载,地址:http://www.xue163.com/588880/39097/390970679.html 为了帮助网友解决“easyui datagrid如何加载通”相关的问题,中国...
  • sam111_222
  • sam111_222
  • 2015年03月12日 11:48
  • 4550

easyUI datagrid ajax实时刷新 动态添加列名

上一篇实现了datagrid加载时列名的动态添加,因项目需求,需要对此页面设置定时器,3秒刷新一次,用datagrid的reload方法刷新时会有闪屏的效果,网上搜的在本页面中添加css样式的方法虽然...
  • sxlxmh1314
  • sxlxmh1314
  • 2015年06月09日 19:53
  • 2776

扩展jquery easyui datagrid 之动态绑定列和数据

easyui datagrid 不支持动态加载列,上次使用的方法是自己用$.post()请求,在回调函数中提取出columns配置,添加到原options中去,然后调用$("#datagrid").d...
  • littlewolf766
  • littlewolf766
  • 2012年03月09日 14:28
  • 25655

easyui中datagrid动态加载列表

在工作中遇到需求:用户可以根据自身的需求设置列表显示哪些列的信息并且这些列的顺序也是可以改变的。而以往正常的datagrid的列的书写是这样的: columns:[[ {fie...
  • m0_37266740
  • m0_37266740
  • 2017年05月23日 17:30
  • 353

easyui datagrid 动态列和前端分页,以及加载Datatable

项目中用到一个执行SQL,展示结果的功能。所以需要动态改变datagrid的列,最好是使用后台分页,但没找到方法,所以使用了前端分页。 后台代码: StringBuil...
  • zhpengfei0915
  • zhpengfei0915
  • 2013年10月31日 18:31
  • 1628

EasyUI的DataGrid绑定Json数据源

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

EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: [html]...
  • li123128
  • li123128
  • 2018年01月06日 13:12
  • 79

EasyUI的DataGrid绑定Json数据源

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

DataTable转为json并绑定Easyui的datagrid控件

最近突然对EasyUi的crud比较感兴趣,于是到它们官网看了看Demo,发 现easyui的crud操作还是比较简单的,但是由于easyui封装的比较紧密这就造成了我们不容易理解。 我们先从显示界...
  • Crazyier
  • Crazyier
  • 2015年04月01日 11:38
  • 1780
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui中datagrid动态绑定json加载列的解决方案
举报原因:
原因补充:

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