easyui 表头动态生成

使用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("\"");和表格头的列字段名相对应即可