基于datagrid框架的查询


Posted in Javascript onApril 08, 2013
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
<link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="JavaScript.js"></script><!--这个是扩展Jquery的方法-->
<script src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
</head>
<body id="layoutbody" class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
</div>
<div data-options="region:'west',title:'West',split:true" style="width: 100px;">
</div>
<div data-options="region:'center',title:'center title'" href="CenterPage.html" style="background: #eee; overflow: hidden;">
</div>
</body>

然后是CenterPage.html框架中的代码,也就是tabs框架中的代码:

<script type="text/javascript" charst="utf-8">
//因为layout框架指向href时,只取html页面body中间的部分,所以该页面这样写即可
//有datagrid包含属性较多,所以尽量使用js的方式初始化datagrid框架
$(function () {
$("#dg").datagrid({
url: "GetJson.ashx", //指向一个一般处理程序或者一个控制器,返回数据要求是Json格式,直接赋值Json格式数据也可,我以demo中自带的Json数据为例,就不写后台代码了,但是我会说下后台返回的注意事项
iconCls: "icon-add",
fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小
//toolbar设置表格顶部的工具栏,以数组形式设置
idField: 'id', //标识列,一般设为id,可能会区分大小写,大家注意一下
loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句
pagination: true, //显示最下端的分页工具栏
rownumbers: true, //显示行数 1,2,3,4...
pageSize: 10, //读取分页条数,即向后台读取数据时传过去的值
pageList: [10, 20, 30], //可以调整每页显示的数据,即调整pageSize每次向后台请求数据时的数据
//由于datagrid的属性过多,我就不每个都介绍了,如有需要,可以看它的API
sortName: "name", //初始化表格时依据的排序 字段 必须和数据库中的字段名称相同
sortOrder: "asc", //正序
columns: [[
{ field: 'code', title: 'Code', width: 100 },
{ field: 'name', title: 'Name', width: 100, sortable: true },//sortable:true点击该列的时候可以改变升降序
{ field: 'addr', title: 'addr', width: 100 }
]],//这里之所以有两个方括号,是因为可以做成水晶报表形式,具体可看demo
toolbar: [{//在dategrid表单的头部添加按钮
text: "添加",
iconCls: "icon-add",
handler: function () {
}
}, '-', {//'-'就是在两个按钮的中间加一个竖线分割,看着舒服
text: "删除",
iconCls: "icon-remove",
handler: function () {
}
}, '-', {
text: "修改",
iconCls: "icon-edit",
handler: function () {
}
}, '-']
});
});
//点击查找按钮出发事件
function searchFunc() {
alert("123");
$("#dg").datagrid("load", sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台
}
//点击清空按钮出发事件
function clearSearch() {
$("#dg").datagrid("load", {});//重新加载数据,无填写数据,向后台传递值则为空
$("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空
}
</script>
<div class="easyui-tabs" fit="true" border="false">
<div title="数据展示表格" border="false" fit="true">
<div class="easyui-layout" fit="true" border="false">
<!--由于查询需要输入条件,但是以toolbar的形式不好,所以我们在Layout框架的头部north中书写查询的相关信息-->
<!-- 这里我们尽量使其展示的样式与toolbar的样式相似,所以我们先查找toolbar的样式,并复制过来-->
<div data-options="region:'north',title:'高级查询'" style="height: 100px; background: #F4F4F4;">
<form id="searchForm">
<table>
<tr>
<th>用户姓名:</th>
<td>
<input name="name" /></td>
</tr>
<tr>
<th>创建开始时间</th>
<td>
<input class="easyui-datetimebox" editable="false" name="subStartTime" /></td>
<!--由于datebox框架上面的数据必须是时间格式的,所以我们用editable="false"来禁止用户手动输入,以免报错-->
<th>创建结束时间</th>
<td>
<input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td>
<td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="searchFunc();">查找</a></td>
<td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="clearSearch();">清空</a></td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',split:false">
<table id="dg">
</table>
</div>
</div>
</div>
</div>

Jquery的扩展代码:

var sy = $.extend({}, sy);/*定义一个全局变量*/
sy.serializeObject = function (form) { /*将form表单内的元素序列化为对象,扩展Jquery的一个方法*/
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;
};

图示:

基于datagrid框架的查询

 

Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js格式化时间的方法
Dec 18 Javascript
package.json文件配置详解
Jun 15 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
datagrid框架的删除添加与修改
Apr 08 #Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 #Javascript
jQuery setTimeout()函数使用方法
Apr 07 #Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 #Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 #Javascript
jQuery操作checkbox选择(list/table)
Apr 07 #Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 #Javascript
You might like
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
python 实现插入排序算法
2012/06/05 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python把1变成01的步骤总结
2019/02/27 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
运动会广播稿30字
2014/01/21 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
旷课检讨书范文
2014/10/30 职场文书
会议通知范文
2015/04/15 职场文书
教师节领导致辞
2015/07/29 职场文书