dojo小例子（32）dgrid增加filter搜索功能2

左手的ㄟ右手 2022-08-07 09:38 249阅读 0赞

<form id="filterForm">
        Filter by Last Name: <input type="text"name="filter">
        <button type="submit">Filter</button>
    </form>
    <div id="grid"></div>

require([
        "dojo/dom",
        "dojo/on",
        "dojo/store/Memory",
        "dgrid/OnDemandGrid"
    ],function(dom, on, Memory, OnDemandGrid) {
        varform = dom.byId("filterForm"),
            store = newMemory({ data: [
                { id: 1, firstName: "Bryan", lastName: "Forbes"},
                { id: 2, firstName: "Kenneth", lastName: "Franqueiro"},
                { id: 3, firstName: "Colin", lastName: "Snover"},
                { id: 4, firstName: "Kris", lastName: "Zyp"}
            ] }),
            grid = newOnDemandGrid({
                columns: {
                    "firstName":"First Name",
                    "lastName":"Last Name"
                },
                sort:"lastName",
                store: store
            },"grid");
         
        on(form,"submit",function(event) {
            varvalue = form.elements.filter.value;
     
            // Filter lastName, matching against the input text
            grid.set("query", { lastName: value });
     
            // Since we're using a form, prevent normal submission
            event.preventDefault();
        });
    });
    1
    grid.set("query", { lastName: newRegExp(value, "i") });

这种方式，结合使用JsonRest可以把filter参数通过url发送到后台，供条件查询使用，实现后台过滤  
原文http://www.sitepen.com/blog/2013/09/06/dojo-faq-how-can-i-add-filtering-controls-to-dgrid/

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 dojo小例子（11）grid编辑提交

选中grid某一行编辑，打开一个form表单显示这条记录进行编辑，完成后，表单提交时调用此方法把数据存入后台 function submit(){

痛定思痛。/ 2022年08月25日 12:50/ 0 赞/ 277 阅读

相关 dojo小例子（7）dijit.Dialog实现alert功能

![SouthEast][] function showMsg(message, title) { if( title == null )

朱雀/ 2022年08月25日 10:51/ 0 赞/ 263 阅读

相关 dojo小例子（20）动态加载的Select增加一个option空白项

有时我们希望下拉菜单带有提示项，比如默认第一项是“--请选择--”；或者“--全部--”表示包含下拉菜单中的所有条件。有两种实现方式： 1、修改store，在其中添加数据

迷南。/ 2022年08月24日 11:40/ 0 赞/ 315 阅读

相关 dojo小例子（18）为dojox.form.Uploader增加Tooltip功能

Uploader没有ValidationTextBox那种required属性，也就没法实现校验功能。但是实际应用中，我们有时需要提醒用户Uploader不能为空，也就是必须选

野性酷女/ 2022年08月24日 01:54/ 0 赞/ 269 阅读

相关 dojo小例子（32）dgrid增加filter搜索功能2

<form id="filterForm"> Filter by Last Name: <input type="text"name="filter">

左手的ㄟ右手/ 2022年08月07日 09:38/ 0 赞/ 250 阅读

相关 dojo小例子（31）dgrid增加filter搜索功能

<div id="filter-wrapper"> <input id="filter" data-do

深藏阁楼爱情的钟/ 2022年08月07日 09:38/ 0 赞/ 239 阅读

相关 dojo小例子（35）带校验功能SimpleTextarea

// 带校验功能的SimpleTextarea /// define(["dojo/_base/declare", "dijit/form/Simple

阳光穿透心脏的1/2处/ 2022年08月04日 15:43/ 0 赞/ 260 阅读

相关 dojo小例子（34）带Ajax异步验证功能的ValidationTextBox

define([ "dojo/_base/declare", "dijit/form/ValidationTextBox", "doj

古城微笑少年丶/ 2022年08月04日 15:00/ 0 赞/ 250 阅读

相关初识DOJO（2）DOJO页面布局教程例子

学习dojo，首先都会学习到如何对dojo的页面进行布局。dojo的页面是有很多个div组成的，主要需要引入组件是dijit.layout。 dijit.layout在doj

- 日理万妓/ 2022年04月24日 13:44/ 0 赞/ 368 阅读

相关增加 stm32 HID 功能

Stm32 HID(不行) 注意：代码太坑，但修改的方法却是很有参考价值的，所以保存下来。代码太坑，用的是寄存器操作，和库对应不起来，还不稳定，经常连不

梦里梦外;/ 2021年09月21日 07:40/ 0 赞/ 500 阅读