可编辑datagrid跟普通datagrid其实没多少区别,只要引入一个特定的easyui下的jquery.edatagrid.js就可以实现了
加载方式如下:
$('#Dg').edatagrid({
url : '/docContent/jsonMenuLang,
columns : [ columms ],//本文重点
//如果不需要动态的列 只需要这样写就可以了{field:'tw',title:'繁體中文',width:100,align:'center',editor:'text'},
fitColumns : true,
title : '多语言编辑',
checkOnSelect : false,
selectOnCheck : false,
toolbar : "#toolbar",
striped : true,
loadMsg : '正在加载数据,请稍后......',
updateUrl : '/docContent/addMenuLang,//这是在你可编辑表格在内容发生改变时自动保存的路径
autoSave : true,
});
动态列的生成可以分为两种
一、java后台生成传到前端jsp
public String findUsableColumn() throws Exception{
String sRet="{field:'id',checkbox : true,width: 50,},\n{field:'cn',width: 100,title:'简体中文',formatter:formatterA},\n";
List<String> list=daoDocMenu.findUsableLang();
for (int i = 0; i < list.size(); i++) {
if(list.get(i).equals("tw")){
sRet+="{field:'tw',title:'繁體中文',align:'center',width: 100,editor:'text'},\n";
}else if(list.get(i).equals("en")){
sRet+="{field:'en',title:'English',align:'center',editor:'text',width: 100,},\n";
}else if(list.get(i).equals("jp")){
sRet+="{field:'jp',title:'日語',align:'center',editor:'text',width: 100,},\n";
}
}
return "[[\n"+sRet+"]]";
只需要在biz层中拼接好字符串,加载页面时在controller层中用model传到页面,在jsp中用${}接收即可,不可以用异步ajax加载拼接好的列,异步ajax加载出来的是字符串而不是json数据,会导致表格加载失败。
二、js生成数组对象对应datagrid中的属实性现
function getColumn() {
var columns = new Array();
var column = {};
//表格所需要显示的列
//第一列
column["title"] = '名称';
column["field"] = 'na';
column["width"] = 50;
column["formatter"] = formatterA;//formatter方法名
columns.push(column); //当需要formatter的时候自己添加就可以了,原理就是拼接字符串.
//第二列
var column1 = {};
column1["title"] = '当前条目 :英文';
column1["field"] = 'curFld';
column1["width"] = 50;
columns.push(column1);
//返回数组对象
return columns;
}
这种方法比较灵活实用。