1、使用easyui创建grid数据表格由两个方式,
1.1、使用DIV编写
1.2、直接在jquery入口方法中写
2、使用jquery中实现grid的缺点,不够灵活。
3、datagrid的数据绑定是个很郁闷的问题。
它只提供一个url的属性
json的数据格式必须是:tatol 和 rows
4、toolbar里面,默认只能添加按钮。如果做查询,可使用的方式有两种:
4.1、重写toolbar,(如下方例子中的第二段代码。)
4.2、将搜索部分重新用一个div来实现。(使用border布局,增加一个north面板,style="overfolw:hidden;")
用到的属性:
//用到的属性:
$('#datagrid').datagrid({
url:"http://localhost:8080/mew/testCm!listTest.action",//加载数据的url地址
fit:true,//自动填充满
border:false,//去除边框
pagination:true,//分页栏
pageSize:10,//默认选择项
pageList:[10,20,50,100],//下拉框数值
rownumbers:true,//显示行号
fitColumns:false,//是否固定单元格的宽度(缩小浏览器的时候是否出现滚动条)
singleSelect:true,//只允许单选
idField:'ID',//用于记录选中的行号
toolbar:[{}],//有两种写法,1:应用id号,如'#toolbar';2、写类的放方式
columns:[[{
field:'testCm.id',//列字段名字
title:'ID',//列标题文本
width:100,//列的宽度
align:'center',//列的对齐方式
sortable:true,//是否排序
rowspan:2,//占用N行单元格
colspan: 1,//占用M列单元格
hidden:false,//是否隐藏该列
checkbox:true,//是否使用复选框
formatter:function(){},//单元格格式化方法(如:截取部分时间)
styler:function(){},//单元格的
},{},{}]]//列模型
})
注:以下例子不带数据
注:以下例子不带数据
<html>
<head>
<script type="text/javascript">
$(function(){
var datagrid;
$('#datagrid').datagrid({
url:"testCm!listTest.action",
fit:true,//自动填充满
border:false,//去除边框
pagination:true,//分页栏
pageSize:10,//默认选择项
pageList:[10,20,50,100],//下拉框数值
rownumbers:true,
fitColumns:false,
singleSelect:true,
idField:'ID',
toolbar:[{iconCls: 'icon-add',
text:'New User',
handler: function(){alert('add编辑按钮')}
},{
iconCls: 'icon-edit',
text:'Edit User',
handler: function(){alert('edit编辑按钮')}
},{
iconCls: 'icon-remove',
text:'Remove User',
handler: function(){alert('remove编辑按钮')}
},{
iconCls: 'icon-search',
text:'Search User',
handler: function(){alert('search编辑按钮')}
}],
columns:[[
{field:'testCm.id',title:'ID',width:100,align:'center'},
{field:'testCm.passtime',title:'Passtime',width:100,align:'center'},
{field:'testCm.cpys',title:'cpys',width:100,align:'center'},
{field:'testCm.cphm',title:'cphm',width:100,align:'center'},
{field:'testCm.csys',title:'csys',width:100,align:'center'},
{field:'testCm.ckFlag',title:'ckFlag',width:100,align:'center'}
]]
});
})
</script>
</head>
<body>
<table id="datagrid"></table>
</body>
</html>
上面是toolbar的一种实现方式,下面是另一种:
<html>
<head>
<script type="text/javascript">
$(function(){
var datagrid;
$('#datagrid').datagrid({
url:"testCm!listTest.action",
fit:true,//自动填充满
border:false,//去除边框
pagination:true,//分页栏
pageSize:10,//默认选择项
pageList:[10,20,50,100],//下拉框数值
rownumbers:true,
fitColumns:false,
singleSelect:true,
idField:'ID',
toolbar: '#toolbar',
columns:[[
{field:'testCm.id',title:'ID',width:100,align:'center'},
{field:'testCm.passtime',title:'Passtime',width:100,align:'center'},
{field:'testCm.cpys',title:'cpys',width:100,align:'center'},
{field:'testCm.cphm',title:'cphm',width:100,align:'center'},
{field:'testCm.csys',title:'csys',width:100,align:'center'},
{field:'testCm.ckFlag',title:'ckFlag',width:100,align:'center'}
]]
});
})
</script>
</head>
<body>
<table id="datagrid"></table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
<label>搜索:</label>
<input type="text" style="width:120px"/>
<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchUser()">Search User</a>
</div>
</body>
</html>