基于datagrid框架的查询

2024-12-23 18:40:24

代码如下:

然后是CenterPage.html框架中的代码，也就是tabs框架中的代码：

代码如下:

//点击查找按钮出发事件
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">


<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>

<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框架的删除添加与修改

复制代码代码如下: <script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记//因为layout框架指向href时,只取html页面body中间的部分,所以该页面这样写即可//有datagrid包含属性较多,所以尽量使用js的方式初始化datagrid框架$(function () {$("#dg").datagrid({url
JQueryEasyUI datagrid框架的进阶使用

由于datagrid接收数据为Json格式,所以我们在前台展示数据的时候会出现问题,尤其是时间格式,在Json序列化之后,前台无法展示正确的时间数据,那么我们如何解决这样的问题呢?首先我们可以使用datapattern.js来解决这个问题:无需废话,直接上代码: <script src="Scripts/datapattern.js" type="text/javascript"></script> 复制代码代码如下: //列表初始化fun
JQueryEasyUI Layout布局框架的使用

layout就是一个布局面板: 也就是布局的容器,有五个布局区域:北部,南部,东部,西部和中心.其中中心区域面板是必需的,但中心区域面板边缘区域面板是可选的.通过拖动它的边框,面板,可以调整每一个边缘地区.可以嵌套的布局,以便用户可以建立复杂的布局. 如果想要各个区域中的框架随框架的大小改变,请嵌套到layout框架中: 复制代码代码如下: <script type="text/javascript"> //split属性:如果设置为true将显示一个分隔条
JQueryEasyUI datagrid框架的基本使用

今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:无需废话,上代码了: 复制代码代码如下: <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引
基于datagrid框架的查询

复制代码代码如下: <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
基于thinkphp5框架实现微信小程序支付退款订单查询退款查询操作

微信小程序或微信支付相关操作支付退款订单查询退款查询支付成功,进行回调退款成功进行回调用到的方法支付 /** * 预支付请求接口(POST) * @param string $openid openid * @param string $body 商品简单描述 * @param string $order_sn 订单编号 * @param string $total_fee 金额 * @return json的数据 */ public function prepay() { tp_log('
基于Bootstrap框架菜鸟入门教程(推荐)

Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.栅格系统栅格系统的工作原理: "行(row)"必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding). 通过"行(ro
CI框架数据库查询之join用法分析

本文实例讲述了CI框架数据库查询之join用法.分享给大家供大家参考,具体如下: 用 A表中的每个ID 去查询这个 ID 在 people 表中的信息.语句如下: $this->db->from('A'); $this->db->join('B', 'sites.id = B.id'); 用 A表中的每个ID 去查询这个 ID 在 B表中的信息. 注意SQL的约定,如果一个列名在二张表中是重复的,你需要在列名前加上表名和一个"."号.因此sites.id在位置桌
CI框架数据库查询缓存优化的方法

本文实例讲述了CI框架数据库查询缓存优化的方法.分享给大家供大家参考,具体如下: CI框架中有个比较好的查询优化,就是数据库缓存优化 1.开启缓存 //在application/config.php中开启 $db['default']['cache_on'] = TRUE; //在application/config.php中开启 $db['default']['cachedir'] = './cache'; //并在对应的目录中加一个可写缓存目录cache 2. 在对应的查询中开启缓存语句 /
Yii框架参数化查询中IN查询只能查询一个的解决方法

本文实例讲述了Yii框架参数化查询中IN查询只能查询一个的解决方法.分享给大家供大家参考,具体如下: 在yii框架中使用参数化进行IN查询时,结果不如所愿 $sql =<<<SQL SELECT id FROM tb WHERE id IN(:ids) SQL; $db = GeneralService::getSlaveDB(); $result = $db->createCommand($sql)->query([':ids' => '1013,1015,1017'
FleaPHP框架数据库查询条件($conditions)写法总结

本文实例讲述了FleaPHP框架数据库查询条件($conditions)写法.分享给大家供大家参考,具体如下: 在FleaPHP中,凡是用到数据库查询的函数,都需要查询条件参数$conditions,现讲述用法如下: 举例: // $conditions 保存查询条件 $conditions = 'level_ix > 1'; // $tableOrders 是一个订单数据表的表数据入口对象 $order = $tableOrders->find($conditions, 'created D
YII框架关联查询操作示例

本文实例讲述了YII框架关联查询操作.分享给大家供大家参考,具体如下: 以customer order两个表为例关联查询控制器中 $customer = Customer::find()->where('name'=>'zhangsan')->one(); $orders = $customer->hasmany('orders',['customer_id']=>'id')->asArray()->all(); $orders = $customer->

基于datagrid框架的查询

相关推荐

随机推荐