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/

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

希望大家给点建议。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值