easyui datagrid纯js版和调用后台java代码（spring mvc）版

来源：互联网发布：北京大学网络密码编辑：程序博客网时间：2024/05/22 02:05

纯js版：

<div region="center" title="Main Title" style="overflow:hidden;"><div id="tabs" class="easyui-tabs" fit="true" border="false"><!-- 在tab中创建table --><table id ="tt2" title="new"></table><!-- 标签一定要是table，div的话不会显示任何内容 --></div></div>

//json格式数据，total表示总行数，rows表示每页的数据var obj = {'total':100,'rows':[{'code':'1','name':'1','addr':'1','col4':'1'}]};   $('#tt2').datagrid({title:'My Title',//url:'/test/tt5',//静态加载的时候设置url为null或者不写url属性idField:'code',frozenColumns:[[//固定的行                {field:'ck',checkbox:true},//列前可选中的小方格                {title:'code',field:'code',width:80,sortable:true}]],columns:[[//field和json中键值对的key对应，title为列表的列名{field:'name',title:'Name',width:120},{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},{field:'col4',title:'Col41',width:150,rowspan:2}]],});$('#tt2').datagrid('loadData',obj);

调用后台版：

在后台中拼接json，传到前端

json依赖包：

1.commons-lang.jar

2.commons-beanutils.jar

3.commons-collections.jar

4.commons-logging.jar

5.ezmorph.jar

6.json-lib-2.2.2-jdk15.jar

后台用spring mvc，因为datagrid采用ajax方法调用后台，方法为void类型

@RequestMapping("/tt5")public void TT5(HttpServletRequest req,HttpServletResponse res) throws IOException{System.out.println("-----------------");PrintWriter writer = res.getWriter();JSONObject column1 = new JSONObject();column1.put("code", "1");column1.put("name", "zhagnsan");column1.put("addr", "shagnhai");column1.put("col4", "col4");JSONObject column2 = new JSONObject();column2.put("code", "2");column2.put("name", "zhagnsan");column2.put("addr", "shagnhai");column2.put("col4", "col4");JSONArray array = new JSONArray();array.add(column1);array.add(column2);JSONObject jo = new JSONObject();jo.put("total", 100);jo.put("rows", array);System.out.println(jo);writer.print(jo);writer.flush();writer.close();}

前端：

$('#tt2').datagrid({title:'My Title',url:'/test/tt5',//区别就是放开urlidField:'code',frozenColumns:[[                {field:'ck',checkbox:true},                {title:'code',field:'code',width:80,sortable:true}]],columns:[[{field:'name',title:'Name',width:120},{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},{field:'col4',title:'Col41',width:150,rowspan:2}]],});

参考文章：http://www.easyui.info/archives/204.html

http://www.cnblogs.com/java-pan/archive/2012/04/07/JSONObject.html

0 0