extjs 做数据库增删改查时,原先是全部查上来显示的,现在用条件查询,怎么在原先的位置上显示条件查询的结果

extjs 做数据库增删改查时,原先是全部查上来显示的,现在用条件查询,怎么在原先的位置上显示条件查询的结果

8个回答

重写store的onbeforeload方法,构造查询参数,执行查询时这些参数可以直接在后台获取到。这种方式比较好理解。

每次刷新(refreshGrid)都会执行这个方法。

[code="java"]
var grid;
/**

  • grid的参数 */ var params = { start : 0, limit : 1000 };

var rIndex;/** 操作行的id **/

function getGrid(){
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : proPath + '/area/area!orderGrid.action'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'total',root : 'root'},
[ {name:'id'},
{name:'name'},
{name:'code'}
]
)
});

var rn = new Ext.grid.RowNumberer();
var colm = new Ext.grid.ColumnModel([rn,{
    header : "ID",
    dataIndex : "id",
    width : 50,
    sortable : true
}, {
    header : "区域名称",
    dataIndex : "name",
    width : 170,
    sortable : true
}, {
    header : "区域代码",
    dataIndex : "code",
    width : 100,
    sortable : true
},{
    header : "排序",
    dataIndex : "id",
    renderer : orderButton,
    width : 50
}]);



grid = new Ext.grid.GridPanel({
    id : JCmpId.grid,
    region : 'center',
    store: store,
    cm : colm,
    stripeRows: true,
    height:320,
    width:600,
    frame:true,
    title:'区域排序',

    plugins: new Ext.ux.PanelResizer({
        minHeight: 100
    }),
    tbar : new Ext.Toolbar({
        items : [
            '-', '所属城市 ', citySiteCom(),
            '-', 
            {text : '查询',
                iconCls : 'mtfQuery',
                handler :function (){refreshGrid(grid);} 
            }
        ]
    }),
    bbar: new Ext.PagingToolbar({
        pageSize: 1000,
        store: store,
        displayInfo: true,
        refresh : function() {
            refreshGrid(grid);
        },
        plugins: new Ext.ux.ProgressBarPager()
    })
});
grid.addListener('rowclick', function(grid,rowindex,e){
    rIndex = rowindex;
});

// 查询参数统一在此处处理 ,点击刷新按钮更新 start limit见   base.js refreshGrid
store.on('beforeload', function(thiz, options) {
    Ext.apply(thiz.baseParams, {
        time : new Date().getTime(),
        'cityId' : Ext.getCmp("csId").getValue()
    });

});

// store.load({
// params : params
// });
return grid;
}
function refreshGrid(grid) {
var s = grid.getStore();
Ext.apply(params, {
'start' : grid ? grid.getBottomToolbar().cursor : 0
});
s.load( {
params : params
});
}
[/code]

你的数据显示应该是Grid的吧,直接把grid数据刷掉不就可以了?有什么问题?

在Store的请求上加参数
ext3.0使用baseParams
ext4.0使用extraParams

Ext.getCmp('unusualGrid').getStore().baseParams={
sapNum:Ext.getCmp("sapNum").getValue(),
poNum:Ext.getCmp("poNum").getValue(),
mateNum:Ext.getCmp("mateNum").getValue()
}
Ext.getCmp("unusualGrid").getStore().load();

把新的查询条件设置到store里面,然后直接调用store.load(),grid自然就刷新显示新的查询结果了。

[code="java"]
//事件列表
Mes.issue.IssueGrid = Ext.extend(Ext.grid.GridPanel , {
initComponent : function() {
var me = this ,pageSize = 25,

     sm = new Ext.grid.CheckboxSelectionModel(),

     store = new Ext.data.JsonStore({
         autoDestroy: true,
         url: 'issue!query.action',
         root: 'list',
         totalProperty: 'total',
         fields : [
             'id' , 'status' , 'statusDesc','happenAt','definationId',   
             'causeId' , 'causeCode' , 'causeName' , 'typeId' , 'typeName' , 'typeCode' , 'oitType' ,
             'locationId' , 'locationFullName' , 'equiipmentId' , 'equiipmentCode' , 'equipmentName' , 
             'reportRfid' , 'reportName' , 'reportTime' , 
             'check' , 'checkRfid' , 'checkName' , 'checkTime',
             'manage', 'manageRfid','manageName','manageTime','manageDesc',
             'close','closeRfid','closeName','closeTime',
             'order' , 'ip', 'createdAt','modifiedAt','createdBy','modifiedBy'
         ],
         listeners : {
             beforeload : function(store){
                 store.baseParams.start = 0;
                 store.baseParams.limit = pageSize;

                 store.baseParams.condition = me.getQueryCondition();
             },
             exception : function(store , type , action , options , response) {
                 var resp = Ext.decode(response.responseText);
                 resp && resp.message && Mes.Msg.error( resp.message );
             }
         }
     }),

     colModel = new Ext.grid.ColumnModel({
         defaults: {
             width: 80,
             sortable: true
         },
         columns: [
             sm,
             { header : '事件原因' , dataIndex : 'causeName' },
             { header : '设备编码' , dataIndex : 'equiipmentCode' },
             { header : '设备名称' , dataIndex : 'equipmentName' },
             { header : '当前状态' , dataIndex : 'statusDesc' },
             { header : '地点', dataIndex : 'locationFullName' , width : 150},
             { header : '发生时间' , dataIndex : 'happenAt'  , width : 120},
             { header : '报告RFID卡号' , dataIndex : 'reportRfid' },
             { header : '报告人' , dataIndex : 'reportName' },
             { header : '报告时间' , dataIndex : 'reportTime'  , width : 120},
             { header : '是否确认' , dataIndex : 'check' },
             { header : '确认RFID卡号' , dataIndex : 'checkRfid' },
             { header : '确认人' , dataIndex : 'checkName' },
             { header : '确认时间' , dataIndex : 'checkTime' },
             { header : '是否处理' , dataIndex : 'manage' },
             { header : '处理RFID卡号' , dataIndex : 'manageRfid' },
             { header : '处理人' , dataIndex : 'manageName' },
             { header : '处理时间' , dataIndex : 'manageTime' },
             { header : '处理描述' , dataIndex : 'manageDesc' },
             { header : '是否关闭' , dataIndex : 'close' },
             { header : '关闭RFID卡号' , dataIndex : 'closeRfid' },
             { header : '关闭人' , dataIndex : 'closeName' },
             { header : '关闭时间' , dataIndex : 'closeTime' },
             { header : '创建时间' , dataIndex : 'createdAt'   , width : 120},
             { header : '修改时间' , dataIndex : 'modifiedAt'   , width : 120},
             { header : '创建人' , dataIndex : 'createdBy' },
             { header : '修改人' , dataIndex : 'modifiedBy' }
         ]
     }),

     bbar = new Ext.PagingToolbar({
         pageSize: pageSize,
         store: store,
         displayInfo: true,
         displayMsg: '显示事件 {0} - {1} 共 {2} 条',
         emptyMsg: "没有事件显示"
     });

    var createContextMenu = function() {
        return new Ext.menu.Menu({
            items : [
                 {text : '导出...' , handler : function(){
                    Ext.each(Ext.query('form[class=export-excel]') , function(v) {
                        Ext.removeNode(v);
                    });
                    var params = me.queryParams , dh = Ext.DomHelper , 
                        form = dh.append(Ext.getBody() , {tag : 'form' ,cls : 'export-excel', action : 'issue!export.action' , method : 'post'}),
                        tpl = dh.createTemplate({tag : 'input' , type : 'hidden' , name : '{0}' , value : '{1}'});

                    tpl.append(form , ['condition.keyword' , params.keyword ? params.keyword : '']);

                    var tbar = me.getTopToolbar() ,
                        start = tbar.getComponent('startTime'),
                        end = tbar.getComponent('endTime');

                    me.queryParams.start = start.disabled ? null : (start.getValue() && start.getValue().format('Y-m-d'));
                    me.queryParams.end = end.disabled ? null : (end.getValue() && end.getValue().format('Y-m-d'));

                    if (!start.disabled) 
                        tpl.append(form , ['condition.start' , me.queryParams.start]);
                    if (!start.disabled)
                        tpl.append(form , ['condition.end' , me.queryParams.end]);

                    Ext.each(params.status , function(v , i) {
                        tpl.append(form , ['condition.status[' + i + ']' , v]);
                    });
                    Ext.each(params.types , function(v , i) {
                        tpl.append(form , ['condition.types[' + i + ']' , v]);
                    });

                    form.submit();
                }},
                 {text : '短信日志...' , handler : function() {
                     var sm = me.getSelectionModel();
                     if (!sm.hasSelection()) {
                         Mes.Msg.alert('请选择事件记录!');
                         return;
                     }
                     var issue = sm.getSelected().data;
                     var win = new Mes.issue.IssueLogWindow({ issueId : issue.id });
                     win.show();
                 }} ,
                 {text : '事件定义...' , handler : function() {
                     var sm = me.getSelectionModel();
                     if (!sm.hasSelection()) {
                         Mes.Msg.alert('请选择事件记录!');
                         return;
                     }
                     var issue = sm.getSelected().data;
                     var win = new Mes.issue.EventViewWindow({ issue : issue });
                     win.show();
                 }} , 
                 {text : '详细...' , handler : function() {
                     var sm = me.getSelectionModel();
                     if (!sm.hasSelection()) {
                         Mes.Msg.alert('请选择事件记录!');
                         return;
                     }
                     var issue = sm.getSelected().data;
                     var win = new Mes.issue.IssueViewWindow({ issue : issue });
                     win.show();
                 }} 
            ]
        });
    };

    Ext.apply(me , {
        layout : 'fit',
        loadMask: true,
        minHeight:150,
        tbar : me.createTopbar(),
        bbar : bbar,
        store : store,
        sm : sm ,
        colModel : colModel ,
        listeners : {
            rowclick :function(grid, rowIndex){
                var record = me.store.getAt(rowIndex),
                cur = me.issue,
                issue = me.issue = record.data;
                if(cur == undefined || (cur && (issue.id != cur.id))) {
                    me.fireEvent('issueselctionchange' , me , issue);
                }
            },
            rowcontextmenu : function(grid , index ,e){
                var m = createContextMenu();
                e.stopEvent();
                m.showAt(e.getPoint());
            } ,
            search : function(grid , cond) {
                grid.store.load();
            }
        }
    });

    Mes.issue.IssueGrid.superclass.initComponent.call(this , arguments);

    me.addEvents('issueselctionchange' , 'search');
},
createTopbar : function() {
    var me = this;

    function operateHandler() {
        var url = this.url , sm = me.getSelectionModel();
        if (!sm.hasSelection()) {
            Mes.Msg.alert('请选择事件!');
            return;
        }
        var list = [] , datas = sm.getSelections();
        Ext.each(datas , function(item){
            var d = item.data;
            list.push(d);
        });

        Ext.Ajax.request({
            url : url,
            params : {issues : list},
            success: function(response){
                var resp =  Ext.decode(response.responseText);
                if (resp.failure) {
                    Mes.Msg.error(resp.message);
                } else {
                    Mes.Msg.alert(resp.message , function(){
                        me.store.load();
                    });
                }
            }
        });
    }

    return new Ext.Toolbar({
        items : [
            {text : '查询' , handler : function() {
                win = new Mes.issue.QueryWindow({condition : me.condition});
                win.on('condition' , function(panel , condition) {
                    var cond = condition || {};

                    Ext.apply(cond , me.getQueryCondition());

                    me.condition = cond;

                    me.fireEvent('search' , me , cond);
                });
                win.show();
            }},
            ' ',
            { text: '刷新' , handler : function() {
                me.store.load();
            }},

            '-',
            {text : '确认' , url : 'issue!confirm.action' , handler : operateHandler},
            {text : '处理', url : 'issue!process.action' , handler : operateHandler},
            {text : '关闭', url : 'issue!close.action' , handler : operateHandler},
        ]
    });
},
getQueryCondition : function() {
    var cond = this.condition || {};
    cond.locationId = this.location;

    return cond;
}

});
[/code]
这个是我项目里的一个例子

[size=xx-large]晕,没那么复杂,重新加载load数据就可以了。
开始的时候ajax调用过一次,现在你再次调用一次。
data.reload();[/size]

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
extjs 做数据库增删改查时,原先是全部查上来显示的,现在用条件查询,怎么在原先的位置上显示条件查询的结果
extjs 做数据库增删改查时,原先是全部查上来显示的,现在用条件查询,怎么在原先的位置上显示条件查询的结果
extjs grid 如何显示按条件查询结果
需求:有一个grid,用来显示数据库查询的结果列表,默认查询全部结果,分页显示,每页10条。rn在grid的工具条上有一个查询按钮,点击查询按钮弹出一个formpanel,输入查询条件,查询,在grid上显示按条件查询的结果。rnrn现在的问题是:如果我查询出的结果大于10条,由于分页显示,因此分页工具条下一页按钮可用,但是点击下一页按钮(即显示第二页记录)后,会显示全部记录的第二页记录,并不是按条件查询的第二页,rn请问:如何解决以上问题?
ormLite 数据库的增删改查及条件查询
ormLite 数据库的增删改查及条件查询
excel条件查询并显示
excel表格
请问多表关联条件查询怎么查?
表aa 字段:aa_id(aa表主键),bb_id(bb表的主键值),cc_id(cc表的主键值),dd_id(dd表的主键值),ee_id(ee表的主键值),fenshurn表bb 字段:bb_id(bb表主键),classrn表cc 字段:cc_id(cc表主键),subjectrn表dd 字段:dd_id(dd表主键),testrn表ee 字段:ee_id(ee表主键),namernrn以aa表为主表查询5个表,条件是 bb表的字段 bb_id = '33'rn请问SQL语句怎么写?rnrn
Oracle根据IN字句条件查询显示结果
大家应该知道in字句查询出来的结果是无序的,如 id in('1','2')与id('2','1')查询的结果是一模一样的,那么怎么才能使查询的结果是有序的呢? 按照in字句的条件显示结果rn例如:rn.... where id in('2','1','a') 查询的结果应该是:rnid | name....rn'2' | 张三rn‘1’ | 李四rn‘a' | 王五... rnid的顺序与in字句中的顺序是一致的,而不是rn’1‘ ....rn'2'....rn'a'.....
如何使用GridView显示条件查询的结果!
请问如何使用GridView显示条件查询的结果!,我是想实现根据下拉菜单的选项作为字段名,然后根据一个TextBox里的值进行模糊查询.rnrnrn au_lnamern phonern cityrn rn rn rn rn rn rn rn rn rn rn rn rnrn/////////////////////////////////////////////////////rnweb.config里的连接串为:rnrn/////////////////////////////////////////rn上面不能显示任何查询结果,应该怎么写!
如何在datagrid中显示条件查询结果?
根据combobox.text的值textbox.text得到结果如何显示在datagrid中rn就是rn"SELECT ITEM1,ITEM2 FROM TABLE WHERE (ITEM1= '"+textBox1.Text+"')";rn中ITEM1也是用户在combobox中选择输入,请帮忙
springmvc+mysql增删改查【时间段条件查询】
整合springmvc+mysql增删改查,附带数据库
数据库条件查询
排序查询 /* 排序查询:对查询结构进行排序 关键字:order by 字段名 [ASC|DESC] ASC:升序(从小到大),默认的 DESC:降序(从大到小) */ 查询所有记录的name和price,结构按照价格 从大到小进行排序 SELECT pname,price FROM product ORDER BY price DESC...
数据库之条件查询
–条件查询(select condition From table name where searchcondition)–1、比较运算符(=,<>,>,<,>=,<=)注意:<> 等价于 != --查询Student_info中所有女生信息 use Student_412 select * From Student_info where Sgender = '女'–
数据库条件查询
&amp;lt;!-- 根据条件查询 --&amp;gt;  &amp;lt;select id=&quot;selectDeptRecord&quot; resultType=&quot;com.xx.entity.job&quot;&amp;gt; select * from job  &amp;lt;where&amp;gt; 1=1 &amp;lt;if test='Wtime!=&quot;&quot; and Wtime!=null'&amp;gt; and Wtime=#{Wt
基于 C 语言的 JavaScript 引擎探索
点击打开链接
按条件查询,显示数据库中的数据
SqlConnection conn = new SqlConnection();rn conn.ConnectionString = "Data Source=.;Initial Catalog=Library;Integrated Security=True;Pooling=False;Asynchronous Processing=true";rn SqlDataAdapter da = new SqlDataAdapter("select * from BorBookInfo", conn);rn DataSet ds = new DataSet();rn da.Fill(ds);rn dataGridView1.DataSource = ds.Tables[0].DefaultView;rnrn按照TEXTBOX1中的子段BookNo查询,在dataGridView1上显示,该怎么做?我试了好多方法都不行,
求救:关于条件查询显示的问题!
我的两个数据表如下: rnrn表a:rn id title typeid rn 1 aaa 2 rn 2 bbb 2 rn 3 ccc 3 rn 4 ddd 4 rn 5 eee 4 rnrn表b:rn id title typeid rn 1 xxx 2 rn 2 yyy 2 rn 3 zzz 3rn 4 hhh 3rnrn我想实现的功能是:(typeid代表类别)rn例如按照条件typeid=3显示最新的5条数据,其中首先查询表a的typeid=3数据,如果表a数据够了5条,就查询表a的5条数据,如果不够,再查出表b的typeid=3数据rn然后综合成信息列表显示出来。 rnrn这个能用SQL语句实现吗?谢谢各位了。
时间(格式显示与作为条件查询)
时间(格式显示与作为条件查询) 我们在处理数据库数据与页面显示数据之间的关系就属时间最为特殊 从数据库查询到的时间数据直接显示到页面中的时间格式不是我们日常生活显示的时间格式 他显示的是我们不理解的时间格式,这样会阻碍我们查看数据 如下效果图 下面我就给大家讲一个解决的方法 也就是将时间格式转换为我们日常生活的时间格式 首先我们创建一个类 在类里面先创建一个私有字段 再创建一个共有方法用私有字段...
条件查询结果里怎么显示从1到...的自动增长的序列号?
请问在下面的SQL语句条件查询结果里怎么显示从1到...100...的rn自动增1的序列号?rnrnselect * 表名 Where Sex="F"rnrn代码写请写详细一点!
前后端分离实现条件查询结果
【前言】 前后端分离,前端是用的angular框架,后端用的是SSM框架加上一些工具类。 【过程】 这次要做的功能是根据时间和学生姓名的条件来查询数据库中的信息。这篇文章只是介绍有条件的查询,无参的查询就默认做好了的。 第一步,画界面。两个时间控件,一个input框。在这里我用的是PrimeNG的样式结合angular的特点 &lt;div style="margin-left: 15...
jdbc条件查询查不到结果
今天遇到了一个问题,出问题的代码如下:Connection connection; String driver = "com.mysql.jdbc.Driver"; String url ="jdbc:mysql://172.20.46.89:3306/hadoop"; String user = "hadoop"; String password = "hadoop";这时候,如果query="s
条件查询
表1里面有字段date,用来保存日期, 字段M,W,F都是用来保存价钱的rn表2里面有字段month,用来保存自定义的月份,bdate,开始日期,edate,结束日期rnrn例如:rn表1: date M W Frn 5/16/2010 10 5 20 rn 5/17/2010 25 10 30rn 8/15/2010 30 20 10rn 1/22/2011 10 50 10rnrn表2: rnmonth bdate edaternP01FY11 4/4/2010 5/1/2010rnP02FY11 5/2/2010 5/29/2010rnP03FY11 5/30/2010 7/3/2010rnP04FY11 7/4/2010 7/31/2010rnP05FY11 8/1/2010 8/28/2010rnP06FY11 8/29/2010 10/2/2010rnP07FY11 10/3/2010 10/30/2010rnP08FY11 10/31/2010 11/27/2010rnP09FY11 11/28/2010 1/1/2011rnP10FY11 1/2/2011 1/29/2011rnP11FY11 1/30/2011 2/26/2011rnP12FY11 2/27/2011 3/31/2011rnrn这里我想说明一下,表2的P01FY11-P12FY11(1月到12月) 就代表一个财年,P01是一月份(从4/4/2010到5/1/2010),P01-P12是固定不变的,每年变的是后面的FY11,2010年是FY11,2011是FY12....每年的月份划分都是这样(今年的4月到明年的3月为一年)rnrn现在我想用“传参的方式”(因为有几年的数据,不只是当年)查出表1中date在表2中日期范围内(也就是一年之内)的价格总数,用datagrid显示数据,请大家帮帮忙写段代码,麻烦了,谢谢!要实现下面的效果:rn Month P01 P02 P03 P04 P05 P06 P07 P08 P09 P10 P11 P12 total(总价)rn M rn Wrn Frntotal
条件查询!
怎样查出sql数据库中的前200条记录?rnSELECT 姓名,单位名称,住址,电话号码 FROM 表1 where 420 < id < 450
怎么按时间条件查询数据库
条件是:判断最近一星期,商品上传的数量。rn商品上传的时间为sdate;rnrnselect num sdate from product where _____________________________?rnrn今天一天商品上传的数量?rn昨天商品上传的数量?rn最近一个月商品上传的数量?
In条件查询
一种替代ssh的开发框架rn学习简单,简约。上手容易
多个条件查询怎样做
[img=http://www.wyxh.org/tk/image/QQ截图未命名2.bmp][/img]rn象这的查询怎么做,如果用字符串拼接怎么实现rnwcf+linq编写
实现分页查询 条件查询 全部查询
面向接口编程思想: 首相在dao层与service层 我们会创建 dao层的对象和service的对象 所以为了减少代码量和维护方便 我们首先 在dao自定义一个接口 然后定义 该接口的实现类 在service层中也是一样的 然后utils层中 定义 beanFactory类 编写bean.xml 配置文件 代码如下: beanFactory类: public class BeanFact...
按条件查询时出错
function checkNumber()rn rn rn if(document.form_select.number.value.length>0)rn rn var mynumber=/^\d8$/;rn rn if(document.form_select.number.value.length>8 || !mynumber.test(document.form_select.number.value))rn rn window.alert("请输入8位有效数字");rn document.form_select.number.value="";rn document.form_select.number.focus();rn rn return false;rn elsern rn alert("2323223");rn return true;rn rn elsern alert("bbb");rn return true;rn rn rnrn rn function checkGrade()rn rn var mynumber=/^\d1$/;rn if(document.form_select.grade.value.length>0)rn rnrn if(document.form_select.grade.value.length>1 || !mynumber.test(document.form_select.grade.value))rn rn window.alert("请输入1位有效数字");rn document.form_select.grade.value="";rn document.form_select.grade.focus();rn return false;rn elsern rn alert("222");rn return true;rn rn elsern rn alert("vccc");rn return true;rn rn rnrn rn function checkForm()rn rn alert("aaa");rn if(checkGrade() && checkNumber())rn rn alert("aaa");rn form_select.submit();rn rn elsern rn return false;rn rn rn//grade里输入1,number为空是怎么返回的是false
相关热词 c#检测非法字符 c#双屏截图 c#中怎么关闭线程 c# 显示服务器上的图片 api嵌入窗口 c# c# 控制网页 c# encrypt c#微信网页版登录 c# login 居中 c# 考试软件