EasyUI之datagrid('load',object)

最新推荐文章于 2026-03-23 18:52:23 发布

原创最新推荐文章于 2026-03-23 18:52:23 发布 · 2.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

EasyUI

当前文章被收录于：

EasyUI

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用EasyUI的datagrid组件简化查询条件的方法。通过利用serializeObject方法自动将表单元素转换为JavaScript对象，进而传递给datagrid的'load'方法实现数据加载。这种方法大大减少了手动拼接查询参数的工作量。

EasyUI之datagrid(‘load’,object)

使用form表单提交查询条件的时候，以往都是用get到value，然后把这些get的value封装到一个JavaScript对象中。
Jquery提供了一个方法，可以自动对表单中的条件进行封装。

工作流程

jsp中创建表单，包含相关查询条件的字段
封装表单的查询条件到JavaScript对象中
- 调用serializeObject方法
调用datagrid(‘load’,object)
- 调用datagrid方法后台查询

流程代码

下面是代码demo演示

1.jsp编写

四个输入框

<form id="demo" >
    <input type="text" id="input1" name="input1"/>
    <input type="text" id="input2" name="input2"/>
    <input type="text" id="input3" name="input3"/>
    <input type="text" id="input4" name="input4"/>
</form>

2.把条件封装成JavaScript对象并调用后台

=========js代码===========

调用serializeObject方法实现对form表单中对象的封装

//封装对象函数
function getObj(){
    var obj=$("#demo").serializeObject();
    dg.datagrid('load',obj); 
}  

//调用后台查询函数
function getData(){
    dg=$('#view).datagrid({    
        method: "post",
        url:url地址, 
        ======省略很多datagrid属性======
    });   
}