easyui 动态生成datagrid列

来源:互联网 发布:没有网络视听许可证 编辑:程序博客网 时间:2024/03/29 22:35
 后台代码类:
基本类:
public class FieldBean {

private String title;
private String field;
private int width;
private String align;
private boolean sortable;
private boolean resizable;
private boolean hidden;
}//属性的get/set方法已删,自行补齐

controller 类:
 
@RequestMapping(value = "/getAllInfo", method = RequestMethod.POST)
public Map<String,Object> getAllInfo(HttpServletRequest request) {
List<Map<String,Object>> datas = new ArrayList<Map<String,Object>>();
Map<String,Object> data = new HashMap<String,Object>();
                //生成列对应的行数据 
data.put("column1", "111111");
data.put("column2", "222222");
data.put("column3", "333333");
data.put("column4", "444444");
data.put("column5", "555555");
data.put("column6", "666666");
data.put("column7", "777777");
data.put("column8", "888888");
data.put("column9", "999999");
datas.add(data);
Map<String,Object> result = new HashMap<String,Object>();
result.put("rows", datas);
result.put("total", datas.size());
return result;
}

    //生成columns 
@RequestMapping(value = "/getAllColumn", method = RequestMethod.GET)
public Map<String,Object> getAllColumn(HttpServletRequest request) {
List<FieldBean> beans = new ArrayList<FieldBean>();
Map<String,Object> result = new HashMap<String,Object>();
for(int i=1;i<10;i++){
FieldBean bean = new FieldBean();
bean.setTitle("第"+i+"列");
bean.setField("column"+i);
bean.setAlign("center");
bean.setWidth(80);
beans.add(bean);
}
result.put("columns", beans);
return result;
}

//前台获取 
var columns;
function initColumn(){
$.ajax({
        type: "GET",
        url: "api/v11/getAllColumn",
        dataType: "json",
        async:false,//同步请求
        success: function(data){
        columns = data.columns;
        initDataGrid();
        }         
    });
}

function initDataGrid() {
$("#indexGrid").datagrid({
url : "api/v11/getAllInfo",// 加载的URL /EasyUiDemo/api/v11/getAllInfo
pagination : true,// 显示分页
pageSize : 5,// 分页大小
pageList : [ 5, 10, 15, 20 ],// 每页的个数
fit : true,// 自动补全
fitColumns : true,
title : "用户管理",
columns : [columns],
toolbar:'#tb' /*["-", {
            id: 'add',
            text: '增加',
            iconCls: 'icon-add',
            handler: function () {}
        }, "-", {
            id: 'edit',
            text: '编辑',
            iconCls: 'icon-edit',
            handler: function () { }
        }, "-", {
            id: 'del',
            text: '删除',
            iconCls: 'icon-remove',
            handler: function () { }
        }, "-"]*/
});
}

//效果图 
 图片
0 0
原创粉丝点击