datagrid的基本属性&查询和清空功能的实现
2017-09-04 09:50
615 查看
1.datagrid基本属性
center.html
<script charset=UTF-8"> $(function(){ $("#datagrid").datagrid({ //给datagrid初始化 url:'', title:'datagrid', iconCls:'icon-save', pagination:true, //分页 pagesize:10, //每页有10行数据 pageList:[10,20,30,40], //注意这些数值是pagesize的倍数 fit:true, fitColumns:false, //false,表示不会出现横向滚动条;true,则表示能出现横向滚动条(列少的时候用) nowarp:false, //当表格中某一行的一个列内容较多时,就会自动折行(换下一行显示) border:false, //去掉datagrid的边框 idField:'id', //自动标记选中的行,换页后,前面所选中的行依然保留 columns:[[ { title:'编号', field:'id', width:100 //宽度一定要给出,不给出会报错 },{ title:'姓名', field:'name', width:100 },{ title:'密码', field:'password', width:100 } ]], }); }); </script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <div class="easyui-tabs" border="false" fit="true"> <div title="用户管理" border="false"> <table id="datagrid"></table> </div> </div>2.datagrid增删改查(1)
columns:[[ { title:'编号', field:'id', width:100 //宽度一定要给出,不给出会报错 },{ title:'姓名', field:'name', width:100 },{ title:'密码', field:'password', width:100 } ]], toolbar:[{ text:'增加', iconCls:'icon-add', handler:function(){ } },{ text:'删除', iconCls:'icon-remove', handler:function(){ } },{ text:'修改', iconCls:'icon-edit', handler:function(){ } },{ text:'查询', iconCls:'icon-search', handler:function(){ } } ]其中可以将这些工具按钮添加分隔符,如下效果如下:也可以自己设计toolbar效果如下:(2)查询在datagrid方法中,load方法可以进行查询,通常情况下,通过传递一些从参数进行查询,该方法被调用来从服务器加载新数据。(3)清空注:
在datetimebox 设置editable="false",这样用户就不能填写时间,只能选择时间
center.html
<script charset=UTF-8"> $(function(){ var usersearchForm=$("#admin_user_searchForm").form();//获取表单元素的值 var userDatagrid=$("#admin_user_datagrid").datagrid({ //给datagrid初始化 url:'', title:'用户列表', iconCls:'icon-save', pagination:true, //分页 pagesize:10, //每页有10行数据 pageList:[10,20,30,40], //注意这些数值是pagesize的倍数 fit:true, fitColumns:false, //false,表示不会出现横向滚动条;true,则表示能出现横向滚动条(列少的时候用) nowarp:false, //当表格中某一行的一个列内容较多时,就会自动折行(换下一行显示) border:false, //去掉datagrid的边框 idField:'id', //自动标记选中的行,换页后,前面所选中的行依然保留 columns:[[ { title:'编号', field:'id', width:100 //宽度一定要给出,不给出会报错 },{ title:'姓名', field:'name', width:100 },{ title:'密码', field:'password', width:100 },{ title:'创建时间', field:'createdatetime', width:100 },{ title:'最后修改时间', field:'madifydatetime', width:100 } ]], toolbar:[{ text:'增加', iconCls:'icon-add', handler:function(){ userDatagrid.datagrid('appendRow',{ id:'89757', name:'ssss' }); } },'-',{ text:'删除', iconCls:'icon-remove', handler:function(){ } },'-',{ text:'修改', iconCls:'icon-edit', handler:function(){ } },'-',] }); $("#searchForm").click(function(){//查询 userDatagrid.datagrid('load',serializeObject(usersearchForm)); }); $("#cleanForm").click(function(){//清空 userDatagrid.datagrid('load',{});//就是查询所有的内容了,相当于恢复到初始的界面 usersearchForm.find('input').val('');//将input输入框里面的值清空了 }); }); function serializeObject(form){//将form表单元素的值序列化成对象 var o={}; $.each(form.serializeArray(),function(index){ if(o[this['name']]){ o[this['name']]=o[this['name']]+","+this['value']; }else{ o[this['name']]=this['value']; } }); return o; }; </script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <div class="easyui-layout" fit="true" border="false"> <div region="north" border="false" title="过滤" style="height:120px;overflow:hidden;"> <form id="admin_user_searchForm"> <table class="tableForm datagrid-toolbar" style="height:100%;width:100%"> <tr> <th>用户名:</th> <td><input name="name" style="width:315px;"></td> </tr> <tr> <th>创建时间:</th> <td><input name="createdatetimeStart" class="easyui-datetimebox" editable="false" style="width:155px;">至<input name="createdatetimeEnd" class="easyui-datetimebox" editable="false" style="width:155px;"></td> </tr> <tr> <th>最后修改时间:</th> <td><input name="madifydatetimeStart" class="easyui-datetimebox" editable="false" style="width:155px;">至<input name="madifydatetimeEnd" class="easyui-datetimebox" editable="false" style="width:155px;"> <a href="javascript:void(0);" class="easyui-linkbutton" id="searchForm">查询</a> <a href="javascript:void(0);" class="easyui-linkbutton" id="cleanForm">清空</a> </td> </tr> </table> </form> </div> <div region="center" border="false"> <table id="admin_user_datagrid"></table> </div> </div>
相关文章推荐
- C语言实现链表的创建、增加、删除、查询、逆序、清空等基本操作
- 设计与实现模块管理系统的基本功能定义自己的(38--终极阶段 综合查询[5])
- JQuery EasyUI 的datagrid 整合Struts2的查询功能实现
- Django - 与 Mysql 结合的 基本配置操作 并实现查询功能
- Android实战简易教程<二十四>(基于Baas的用户表查询功能实现!)
- 一个基于thinkphp 的 easyui datagrid 组件查询功能的实现
- EasyUI DataGrid使用formatter属性实现自定义功能
- 菜鸟学习OGRE和天龙八部之十六: 网游视角跑图功能基本实现,包括人物,射线查询,鼠标decal等等
- 康威生命游戏 第一部分-基本功能实现(C++ & Windows SDK)
- 实现datagrid编辑功能需要设置DataKeyField属性的值
- 用C++&递归的方法实现二叉树的基本功能~
- ArcGIS API For Javascript之地图基本加载与显示,地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现
- C#+AE 实现点击查询属性功能
- C#+AE 实现点击查询属性功能
- datagrid在MVC中的运用01-基本属性并实现分页
- WMS仓储管理系统实现"收发存日报表"数据查询功能Sql语句--Oracle
- Mybatis实现简单的分页,以及基本的查询修改功能
- 菜鸟学习OGRE和天龙八部之十六: 网游视角跑图功能基本实现,包括人物,射线查询,鼠标decal等等
- 使用json实现查询条件传回Action进行hql语句拼接查询实现在结果中查询功能在datagrid中显示查询结果
- EasyUI DataGrid使用formatter属性实现自定义功能