zoukankan      html  css  js  c++  java
  • Ext3.2弹出窗囗查询分页显示后台数据列表

    需要用Ext做一个查询选择病人信息的弹出窗囗,并将选择的病人名称返回到前一页面,后又加入查询结果分页及显示复选框,代码如下:
    使用的Ext版本为3.2
    前台代码:

    var desobj;
    function selectSick(obj) 
        desobj = obj;{//obj是打开弹出窗囗的页面的对象,用以回显本窗囗选择的数据
        selectSickWindow.show();//弹出窗囗
    }
    
    Ext.onReady(function() {
                docstore.load();
                ds.load({params:{
                            start : 0,//查询的起始位置
                            limit : 10//每次查询的数量,应与PagingToolbar的PageSize值相同
                        }});
            })
    
    var docstore = new Ext.data.Store({// 下拉框的数据源
        proxy : new Ext.data.HttpProxy({
                    url : 'queryDoctorData.jsp'
                }),
        reader : new Ext.data.JsonReader({
                    totalProperty : 'totalProperty',
                    root : 'root'
                }, [{
                            name : 'queryDoctorId',
                            mapping : 'queryDoctorId'
                        }, {
                            name : 'queryDoctorName',
                            mapping : 'queryDoctorName'
                        }]),
        remoteSort : false
    });
    
    var queryform = new Ext.form.FormPanel({
                id : 'queryform',
                header : false,
                frame : true,
                hideBorders : false,
                height : 40,
                buttonAlign : 'center',
                items : [{ // 行1
                    layout : "column", // 从左往右的布局
                    items : [{
                                columnWidth : .35, // 该列在整行中所占百分比
                                layout : "form", // 从上往下的布局
                                labelWidth : 60,
                                items : [{
                                            xtype : "textfield",
                                            fieldLabel : "病人姓名",
                                            name : 'querySickName',
                                            id : 'querySickName',
                                            width : 120
                                        }]
                            }, {
                                columnWidth : .35,
                                layout : "form",
                                labelWidth : 60,
                                items : [{
                                            xtype : "combo",// 下拉框
                                            fieldLabel : "所属医生",
                                            id : 'doctorCombo',
                                            name : 'doctorCombo',
                                            mode : 'local',
                                            triggerAction : 'all',
                                            store : docstore,
                                            typeAhead : true,
                                            hiddenName : 'queryDoctorId',
                                            displayField : 'queryDoctorName',
                                            valueField : 'queryDoctorName',
                                            selectOnFocus : true,
                                            editable : false,
                                            width : 120
    
                                        }]
                            }, {
                                columnWidth : .15,
                                layout : "form",
                                items : [{
                                    xtype : "button",
                                    text : "查询",
                                    width : 80,
                                    handler : function() {// 根据条件重新查询数据
                                        var querySickName = Ext
                                                .getCmp("querySickName").getValue();
                                        // var queryDoctorName =
                                        // Ext.get('queryDoctorId').dom.value;
                                        var queryDoctorName = Ext
                                                .getCmp("doctorCombo")
                                                .getRawValue();
                                        ds.reload({
                                                    params : {
                                                        start : 0,
                                                        limit : 10,
                                                        sickname : querySickName,
                                                        doctorname : queryDoctorName
                                                    }
                                                });
                                    }
                                }]
                            }, {
                                columnWidth : .15,
                                layout : "form",
                                items : [{
                                            xtype : "button",
                                            text : "重置",
                                            width : 80,
                                            handler : function() {
                                                Ext.getCmp('queryform').form
                                                        .reset();
                                            }
                                        }]
                            }]
                }]
            })
    
    var bottomform = new Ext.form.FormPanel({
                id : 'bottomform',
                header : false,
                frame : true,
                hideBorders : false,
                height : 55,
                buttonAlign : 'center',
                items : [{ // 行1
                    layout : "column", // 从左往右的布局
                    items : [new Ext.Panel({
                                layout : 'table',
                                buttonAlign : 'center',
    
                                buttons : [{
                                    text : '确 定',
                                    handler : function() {
    
                                        var selModel = sickInfoGrid
                                                .getSelectionModel();
                                        if (selModel.hasSelection()) {
                                            desobj.value = selModel.getSelected()
                                                    .get("sickname");//将选中的病人名称回示到前一个页面的obj对象上
                                            selectSickWindow.hide();//隐藏弹出窗囗
                                        } else {
                                            Ext.Msg.alert("提示", "请选择一条记录");
                                        }
    
                                    }
                                }, {
                                    text : '关 闭',
                                    handler : function() {
                                        selectSickWindow.hide();
                                    }
                                }]
                            })
    
                    ]
                }]
            })
    
    var sm = new Ext.grid.CheckboxSelectionModel();// 复选按钮
    
    var cm = new Ext.grid.ColumnModel([sm, {// GridPanel列定义
        header : '序号',
        dataIndex : 'rownum',
        width : 20,
        sortable : true
    },{
        header : '病人姓名',
        dataIndex : 'sickname',
        width : 200,
        sortable : true
    }, {
        header : '病历编码',
        dataIndex : 'dtcode',
        width : 200,
        sortable : true,
        id : 'expand'
    }, {
        header : '所属医生',
        dataIndex : 'doctorname',
        width : 200,
        sortable : true
    }]);
    
    cm.defaultSortable = true; // 排序
    var ds = new Ext.data.Store({// GridPanel的数据源
    
        proxy : new Ext.data.HttpProxy({
                    url : 'querySickData.jsp'
                }),
        reader : new Ext.data.JsonReader({
                    totalProperty : 'totalProperty',
                    root : 'root'
                }, [{
                            name : 'rownum',
                            mapping : 'rownum'
                        },{
                            name : 'sickname',
                            mapping : 'sickname'
                        }, {
                            name : 'doctorname',
                            mapping : 'doctorname'
                        }, {
                            name : 'dtcode',
                            mapping : 'dtcode'
                        }]),
        remoteSort : false
    
    });
    
    var sickInfoGrid = new Ext.grid.GridPanel({// GridPanel查询结果展现区
        // title:'病人信息',
        margins : '0',
        split : true,
        trackMouseOver : false,
        store : ds,// Grid数据源
        loadMask : {
            msg : '正在加载数据,请稍侯……'
        },
        autoWidth : true,
        bodyStyle : '100%',
        // sm : sm,// GridPanel中的复选按钮,可以全选所有的行,若没有设置该属性,则GridPanel得全选功能不能实现
        cm : cm,
    
        // 选择模式
        selModel : new Ext.grid.RowSelectionModel({
            singleSelect : true
                // 只可单选
            }),
        // 分页栏
        bbar : new Ext.PagingToolbar({
                    pageSize : 10,
                    store : ds,
                    displayInfo : true,
                    emptyMsg : "没有记录"
                }),
    
        autoExpandColumn : 'expand',
        region : 'center',
        height : 275
    });
    
    selectSickWindow = new Ext.Window({
                title : '选择病人',
                resizable : false,
                height : 400,
                width : 600,
                modal : true,
                autoDestroy : true,
                closeAction : 'hide',
                modal : true,
                items : [queryform, sickInfoGrid, bottomform]
            });


    取数据的JSP代码:

    querySickData.jsp
    
    <%@ page language="java" contentType="text/html;charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ page import="java.util.List"%>
    <%@ page import="java.util.Map"%>
    <%@ page import="java.util.HashMap"%>
    <%@ page import="java.util.ArrayList"%>
    <%@ page import="net.sf.json.JSONArray"%>
    <%@ page import="my.com.util.DBService"%>
    
    <%
        String start = request.getParameter("start");
        if (start==null) start = "0";
          String limit = request.getParameter("limit");
        if (limit==null) limit = "10";
          int pagestart = Integer.parseInt(start);
          int pageend = Integer.parseInt(start)+Integer.parseInt(limit);
    
        String doctorname = request.getParameter("doctorname");
        String sickname = request.getParameter("sickname");
        if (doctorname==null)doctorname = "";
        if (sickname==null)sickname = "";
        
    
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        String sqlString = "s.sickname,s.dtcode,IsNull(d.fullname,'') fullname from sickinfo s LEFT JOIN doctorinfo d on s.doctorid=d.id and d.delflag=0 and d.isdoctor=1 where 1=1 ";
    
        if (!sickname.trim().equalsIgnoreCase("")){
            sqlString = sqlString+" and s.sickname like '%"+sickname+"%'";
        }
        if (!doctorname.trim().equalsIgnoreCase("")){
            sqlString = sqlString+" and d.fullname = '"+doctorname+"'";
        }
        sqlString = "SELECT ROW,sickname,dtcode,IsNull(fullname,'') fullname From (SELECT ROW_NUMBER() OVER (ORDER BY s.id) AS ROW, "+sqlString + ")  as ProductsWithRowNumbers";
    
        try {
            List<Map<String,String>> sickList = new DBService().query(sqlString);
            
            Map<String,String> tmpMap = null; 
            Map<String, Object> map = null;
    
            if (pageend>sickList.size())pageend=sickList.size();
    
            for (int i = pagestart; i < pageend; i++) {
                tmpMap = sickList.get(i);
                map = new HashMap<String, Object>();
                map.put("rownum", tmpMap.get("ROW"));
                map.put("sickname", tmpMap.get("sickname"));
                map.put("doctorname", tmpMap.get("fullname"));
                map.put("dtcode", tmpMap.get("dtcode"));
                list.add(map);
            }
            //System.out.println("{totalProperty:"+sickList.size()+",root:"+JSONArray.fromObject(list)+"}");    
            out.println("{totalProperty:"+sickList.size()+",root:"+JSONArray.fromObject(list)+"}");    
        } catch (Exception err) {
            err.printStackTrace();
        }
    %>

    queryDoctorData.jsp大同小异,略


    前一页面的调用弹出窗囗的JS代码:

    <script type="text/javascript">
    function openSelectSick(){
    selectSick(document.getElementById('sickNameResult'));
    }
    </script>
  • 相关阅读:
    postgresql-磁盘空间不足问题排查
    postgresql-删除重复数据
    postgresql-排序
    磁盘耗时时间
    nginx 报错 The plain HTTP request was sent to HTTPS port
    nodejs使用pkg打包
    npm 设置镜像源
    IDEA通过Ctrl+鼠标滚轮放大/缩小字体
    使 nodejs 代码 在后端运行(nohup)
    加密HSQLDB的.script文件
  • 原文地址:https://www.cnblogs.com/dyfh/p/2589814.html
Copyright © 2011-2022 走看看