easyUI datagrid使用

1，---------------------------------------导入必要的文件----------------------------------------------------

<!-- 使用easyUi所需要的样式，和js文件 -->

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>

<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>

<link rel="stylesheet" type="text/css" href="../css/demo.css"/>

<link rel="stylesheet" type="text/css" href="../css/smartpaginator.css"/>

<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

<script type="text/javascript" src="../js/smartpaginator.js"></script>

2，在jsp页面添加下列html标签，注意这里设置的id.

<table id="xmjtList" width="500" high="700"></table>

3，使用jquery对上面的标签添加数据（这里就是datagrid的使用）

$(function() {

//这里是datagrid的重点。

$('#xmjtList').datagrid({

url:xmjtUrl,//获取数据的url（这里获取的数据要符合json数据格式）

loadMsg:"正在加载数据，请等待！",

singleSelect:true,//设置单选、多选。true单选，false 多选。

rownumbers:true,

singleSelect:true,

autoRowHeight:false,

pagination:true,

pageSize:10,

idField:'id',

columns:[[//datagrid展示的列:合同id,项目名称，项目类型，承担单位。

{field:'ck',checkbox:true,disable:true,title:'操作'},

{field:'unid',title:'合同id',hidden:true,sortable:true},

{field:'xmmc',title:'项目名称',width:150,sortable:true},

{field:'xmlx',title:'项目类型',width:200,sortable:true},

{field:'cddw',title:'承担单位',width:300,sortable:true}

]]

});

//设置分页控件 ，这里为datagrid添加客户端分页。前台数据获取的数据比较少的时候可以考虑使用。

//这是额外的，如果你不使用分页后面这段代码不用添加。

var p = $('#xmjtList').datagrid('getPager');

$(p).pagination({

pageSize: 10,//每页显示的记录条数，默认为10

pageList: [5,10,15],//可以设置每页记录条数的列表

beforePageText: '第',//页数文本框前显示的汉字

afterPageText: '页 共 {pages} 页',

displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'

});

});

4，对于json不了解建议看下下面的网站。

http://www.json.org/

---------------------------------------

希望大家给点建议。