easyui-（三）table

1.table了

要转换为json格式的数据

自动往后台提交了page和pagesize
后台接收$page = $_POST['page'];
$pageSize = $_POST['rows'];
$first = $pageSize * ($page - 1);
limit $first,$pageSize
返回数据格式total,rows
<table id="box"></table>
<script type="text/javascript">
$(function(){

$('#box').datagrid({

loadMsg：‘拼命加载中..’.

rowNumbers:true  #显示行号

singleSelect:true  只能选择一行，黄色的效果

width:400,
url:'content.json/xxx.php' /*就会返回数据*/
title:'用户列表',
iconCls:'icon-search',
columns:[[
{
field:'user',
title:'帐号',

width:200,

align：‘center’  //居中

formatter:function(value,row,index)
{
return value;效果也是显示一列，但是可以对出书进行处理
}

},
{
field:'email',

title:'邮箱',

sortable:true, 增加字段排序功能

},
{
field:'date',
title:'注册时间',
},
]]，
pagination:true,
pageSize:5,
pageList:[5,10,15],
})
})

</script>

2.表格属性了，放在datagrid里面

排序

$order= $_POST['order'];

$sort= $_POST['sort'];

sortName:'data',
sortOrder:'DESC',

自动发一个参数给后台，然后再根据参数改sql

3.滚动条根据datagrid里面的高度限制的。

4.表格里面的按钮和搜索框

<table id="box"></table>
<div id="tb">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" οnclick="obj.add()" plain="true" 跟背景融为一体>增加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" 跟背景融为一体>编辑</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" 跟背景融为一体>删除</a>
</div>
<div>
查询帐号:<input type="text" class="textbox" name="user" style="width: 100px;">
创建时间从:<input type="text" name="data_from" class="easyui-datebox">
到:<input type="text" name="data_to" class="easyui-datebox">
<a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="obj.search()">查询</a>
</div>
<script type="text/javascript">
设置全局变量
obj = {
search :function(){
$('#box').datagrid('load',{
user : $.trim($('input[name="user"]').val());
data_from : $.trim($('input[name="data_from"]').val());
data_to : $.trim($('input[name="data_to"]').val());
})
},

add : function(){

}
}
</script>

时间选择的地方edittable="false"  这样就不能输入时间，只可以选择时间了

后面的内容都是增删改查了。还有一些有用的事件，可以去查手册

5.属性表格跟datagrid差不多，大多数继承他的

$(function(){
$('#box').propertygrid({
url:'xx.php',数据是分好组的，就可以分组显示 json
showGroup:true,
groupField:'group',
groupFormatter:function(group,row){
return '[' + group + ']';
}
})
})


数据格式
[
{
"name" : 'PHP版本',
'value' : "5.5",
'group' : "系统信息",
'editor' : "text"
},
{
"name" : 'CPU',
'value' : "5.5",
'group' : "系统信息",
'editor' : "text"
},
{
"name" : 'XXX',
'value' : "5.5",
'group' : "管理信息",
'editor' : "text"
},
{
"name" : '密码',
'value' : "5.5",
'group' : "管理信息",
'editor' : "text"
}
]