基于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 相关文章推荐
jQuery 改变CSS样式基础代码
Feb 11 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php检测url是否存在的方法
2015/04/14 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
党员2014两会学习心得体会
2014/03/17 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python