使用EasyUI实现列不固定的表格(需要引入easyUi中的jquery.easyui.min.js、easyui.css、icon.css),步骤如下:

jsp页面:

1.新建一个准备放table的div容器:<div id="divDatagrid">   </div> 

2.在页面加载好后,调用后台获取表头列信息:

<script type='text/javascript'>
        $(function(){
            //先清空datagrid
            $('#divDatagrid').html('<table id="totalTb"></table>');//动态创建表
            //通过ajax请求生成的新的datagrid的列名
            $.ajax({
                url:'请求表头json格式的url‘,
                type:"POST",
                dataType:'json',
                data:{},
                success:function(data){//获取表头数据成功后,使用easyUi的datagrid去生成表格

                    $('#totalTb').datagrid({
                        url: '请求表格数据的URL’,
                        fitColumns: true,
                        singleSelect:true,
                        idField:"appId",
                        columns:data,//外层ajax请求的表头json
                        queryParams:{},
                        onSelect:function(rowIndex, rowData){
                            alert(rowData.appId);

                        }//end of onSelect:function
                    });
                },error:function(xhr){
                    alert('error');
                }
            });

   });

</script>

最关键的是columns:data,data是后台组装好的

后台数据组装:

1.新建立个bean,用于设置column的相关属性(可自行根据EASYUI的列属性设置)如下:

public class ColumnInfo {
    private String field;//列字段名称
    private String title;//列标题文本
    private int width;//列的宽度
    private String align;//指明如何对齐列数据。可以使用的值有:'left','right','center'

   //此处省略get set方法

}

2.组装表格头:

       List<ColumnInfo> list = new ArrayList<ColumnInfo>();
      
        list = mgmt.queryCityList(width);//调用service层去读数据,定义每个列字段名为'COL(动态ID)',如COL1、COL33、COL24
        ColumnInfo info = new ColumnInfo();//固定的第一列,如没有,则不需要
        info.setTitle("区域<div id='drawline'></div>名称");
        info.setField("appName");
        info.setWidth(120);
        info.setAlign("center");
        list.add(0,info);
        List tmList = new ArrayList();//必须再套一层
        tmList.add(list);
       JSONArray jsonArray = JSONArray.fromObject(list);
        getResponse().setContentType("text/html; charset=utf-8");
        getResponse().getWriter().write(jsonArray.toString());

3.组装表数据:

因为列名不固定,此时无法创建bean,所以使用拼字符串的方式,如下所示:

StringBuffer eachBuffer = new StringBuffer("{\"appName\":\"").append(“墨迹天气”).append("\"");
eachBuffer.append(",\"appId\":\"").append(“app01”).append("\"");和表格头的列字段名相对应即可

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐