文档.txt

php绿色服务器,让大家试用greenamp

EditGrid里得到修改后的数据


EditGrid在Ext是用得比较多的一种UI组件，编辑数据也比较方便，但一直以后处理起来比较繁琐，一般的操作是编辑完一个单元格自动保存数据，再刷新Girfd。但这对于频繁修改数据的用户来说会带来性能上的损失。
   现介绍一种完整提交修改和删除数据的方法，这样只需提交一次数据给服务器。
   以上为网上搜罗的实际代码。
  
增加新记录到grid

[Copy to clipboard] [ - ]CODE:
   ds.add(
        new Ext.data.Record(
                {
                 userid: '100',
                                 username: '赵四',
                                 userage: 20,
                                 userjob: '厨师',
                newRecord:true  //增加一个补充字段，设为真标识为是新记录
                }
       ));


[Copy to clipboard] [ - ]CODE:
function getChang()
        {
           var jsonData = "[";
                                                
           for(i=0;i<ds.getCount();i++) {
                record = ds.getAt(i);
                if(record.data.newRecord || record.dirty) {
                jsonData += Ext.util.JSON.encode(record.data) + ",";
                
                }                        
           jsonData = jsonData.substring(0,jsonData.length-1) + "]";//得到json数据
          gridForm.submit(
                {
                  waitMsg: '保存改变，请等待...',
                 url:'useradd.php',
                  params:{data:jsonData},
                  success:function(form, action) {
                  alert('你的改变已保存成功!!!!');
                        },
                failure: function(form, action) {
                        alert('你的改变未能正常保存成功!');
                        }
                                        
                );                        
        }
以上是个人总结，有什么问题欢迎讨论！
 
  
 
victor1017 

注册会员


 

UID 75
精华 0
积分 30
帖子 3
阅读权限 1
注册 2007-5-8
状态 离线  #2使用道具  发表于 2007-6-19 17:09  资料  个人空间  短消息  加为好友   
为什么说"一般的操作是编辑完一个单元格自动保存数据"呢？我怎么没发现这个功能。
我都是编辑完所有要编辑的，然后点"保存"一次提交的。
 
  
 
jerry 

注册会员


 

UID 63
精华 0
积分 4
帖子 7
阅读权限 1
注册 2007-5-6
状态 离线  #3使用道具  发表于 2007-6-20 13:38  资料  个人空间  短消息  加为好友   
victor1017 把你的代码也帖出来,参考一下你的做法.
 
  
 
dbclick 

版主


 

UID 114
精华 0
积分 33
帖子 10
阅读权限 100
注册 2007-5-14
状态 离线  #4使用道具  发表于 2007-6-20 17:12  资料  个人空间  短消息  加为好友   
这些代码可能对大家有用

[Copy to clipboard] [ - ]CODE:
function save(){
        var m = ds.modified.slice(0);
        if(m.length > 0)
        {
                Ext.MessageBox.confirm('提示框', '您确定要进行该操作？' , saveNext);        
        }
        else
        {
                Ext.MessageBox.alert('提示框', '对不起，您没有增加或修改记录！');
        }
    }
    function saveNext(btn){
       if(btn == 'yes')
       {
               
               button.items.get('Clearbtn').disable();
                button.items.get('Savebtn').disable();
                button.items.get('Deletebtn').disable();
        var m = ds.modified.slice(0);
                var jsonData = "[";
        for(var i = 0, len = m.length; i < len; i++){        
                        var ss = JSON.stringify(m.data);
                        if(i==0)
                           jsonData = jsonData + ss;
                           else
                                jsonData = jsonData + "," + ss;
        }        
                jsonData = jsonData + "]";
                ds.modified = [];//将修改过的记录置为空，如果不清空，则修改过的数据会一直保留
                //换地址的方式
                //alert(jsonData);
                method = 'save';
        ds.load({params:{start:paging.cursor,limit:pagePer,saveData:jsonData,method:method}});
       }
       else
       {
                       //Ext.MessageBox.alert('提示框', '您取消了该操作！');
       }         
    } 
 






改造的是 http://extjs.com/deploy/ext/docs/index.html Inline editing 这个例子 把数据源换成从数据库取数了，可是界面上显示不出数据来 不知道那里有问题，请高手指教，另外顺便在问一句这个例子中 新增加一行记录 怎么把新增加或修改的数据保存到数据库 谢谢 
dao里实现如下
public List QueryYhxx(String tj) {        
        StringBuffer sb =new StringBuffer();                
        sb.append(" SELECT psuser_uid,psuser_name,psuser_zznm,psuser_cjrq,psuser_cjr ");
        sb.append(" From psuser ");                
                        
        return (List)getJdbcTemplate().query(sb.toString(),new ResultSetExtractor() {
                        public Object extractData(ResultSet rs)
                                throws SQLException, DataAccessException {
                                        List lt = new ArrayList();                                                 
                                        while (rs.next()) {
                                                test  dbean = new test(); 
                                                dbean.setBh(rs.getString("psuser_uid"));
                                                dbean.setXm(rs.getString("psuser_name"));
                                                dbean.setTel(rs.getString("psuser_zznm"));
                                                dbean.setAdd(rs.getString("psuser_cjrq"));

                                                lt.add(dbean);                
                                        }
                                        return lt;
                                }
                        });        
}

action 里实现如下
public String getGridJsonData1(ActionForm form,HttpServletRequest request,HttpServletResponse response) throws IOException{
        List list=this.getService().QueryYhxx("");
        System.out.println("test");                
        //JSONArray jsonArray = JSONArray.fromObject(list);                 
        //不知道该用  JSONArray.fromObject 还是用 JSONArray.fromCollection((Collection) list) 好象结果是一样的
        //System.out.println("test:"+jsonArray.length());
        //System.out.println("test:"+jsonArray.toString());

        String json=JSONArray.fromCollection((Collection) list).toString();
        
        System.out.println("test:"+json);
        
        response.setContentType("text/html;charset=UTF-8");                
        response.getWriter().print("{datalist:" + json + "}"); 
        
        return null;
}        

System输出的数据如下:
[{"add":"20070621  ","xm":"test","bh":"001","tel":"山东省组织部","cj":0}]

页面显示数据脚本如下
Ext.onReady(function(){



    function formatBoolean(value){
        return value ? 'Yes' : 'No';  
    };
    
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };
    // shorthand alias
    var fm = Ext.form, Ed = Ext.grid.GridEditor;

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel([{
           header: "编号",
           dataIndex: 'bh',
           width: 220,
           editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },{
           header: "姓名",
           dataIndex: 'xm',
           width: 130,
           editor: new Ed(new fm.TextField({
               allowBlank: false
            }))
        },{
           header: "组织内码",
           dataIndex: 'tel',
           width: 70,