easyui 动态生成datagrid列

 后台代码类:
基本类:
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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值