使用easyUI提供的API创建datagrid(例子)

刺骨的言语ヽ痛彻心扉 2022-03-20 07:09 198阅读 0赞

###  datagrid.jsp ###

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    
    <script type="text/javascript"
    	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
    
    <link rel="stylesheet" type="text/css"
    	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
    	href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css"
    	href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
    <link rel="stylesheet" type="text/css"
    	href="${pageContext.request.contextPath }/css/default.css">	
    <script type="text/javascript"
    	src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
    	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
    <script type="text/javascript"
    	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
    <script
    	src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
    	type="text/javascript"></script>
    	
    <script type="text/javascript">
    		$(function(){
    			//页面加载完成后，创建数据表格datagrid
    			$("#mytable").datagrid({
    				//定义标题行所有的列
    				columns:[[
    				          {title:'编号',field:'id',checkbox:true},
    				          {title:'姓名',field:'name'},
    				          {title:'年龄',field:'age'},
    				          {title:'地址',field:'address'}
    				          ]],
    				//指定数据表格发送ajax请求的地址
    				url:'${pageContext.request.contextPath }/json/datagrid_data.json',
    				rownumbers:true,
    				singleSelect:true,
    				//定义工具栏
    				toolbar:[
    				         {text:'添加',iconCls:'icon-add',
    				        	 //为按钮绑定单击事件
    				        	 handler:function(){
    				        	 	alert('add...');
    				         	 }
    				         },
    				         {text:'删除',iconCls:'icon-remove'},
    				         {text:'修改',iconCls:'icon-edit'},
    				         {text:'查询',iconCls:'icon-search'}
    				         ],
    				//显示分页条
    				pagination:true
    			});
    		});
    	</script>
    </head>
    <body>
    <table id="mytable">
    	
    </table>
    
    
    </body>
    </html>

### datagrid\_data.json ###

{
    	"total":11,
    	"rows":[
    			{"id":"001","name":"tom","age":12,"address":"tianjing"},
    			{"id":"002","name":"jack","age":13,"address":"beijing"},
    			{"id":"003","name":"jeery","age":14,"address":"dahe"}
    			]
    }