easyui-(三)table
来源:互联网 发布:虫虫软件 编辑:程序博客网 时间:2024/05/22 12:02
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" onclick="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" onclick="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"
}
]
- easyui-(三)table
- easyUI table
- bootstrap-table(三)
- 学习easyui疑问(三)
- etmvc+jQuery EasyUI使用教程(三)
- 轻松入门easyui(三)效果展示
- jquery easyui table 典型应用
- jquery easyui table 典型应用
- easyui table 用法 个人小结
- Lua数据结构 — Table(三)
- SQL优化(三) PostgreSQL Table Partitioning
- Lua数据结构 — Table(三)
- Bootstrap Table使用整理(三)
- Bootstrap Table使用整理(三)
- easyui入门(三)
- EasyUI总结三
- jquery-easyui中轻松转换html table
- 使用easyUI转换HTML table到datagrid
- 解决无限嵌套文件夹无法删除的问题[WIN10]
- 算法-排序(C#)
- HTML5 利用JavaScript 实现图像基本操作
- printf的扩展
- 僵尸进程和孤儿进程
- easyui-(三)table
- 绝对定位和相对定位
- 【bzoj2144】跳跳棋
- 树上dp 完美的服务(py)(Perfect Service)(UVa 1218)题解
- (9)关卡编辑器之视口工具条
- 效果出来了,但是控制台报bug
- TCP-IP详解之TCP的成块数据流3
- 模拟实现C库函数strncpy、strncat、strncmp
- Leetcode20. Valid Parentheses