EXTJS-Grid

///HTTP Proxy方式
var prox=new Ext.data.HttpProxy({url:"../DataService.aspx?Action=XML"});
var jprox=new Ext.data.HttpProxy({url:"../DataService.aspx?Action=JSON"});
Ext.Ajax.request({
url:"../DataService.aspx?Action=JSON",
     success:xtoss,
        failure:xtoss
})
///record 指明存储数据的节点名称  totalRecord 总记录数 success 成功情况
var reader  = new Ext.data.XmlReader({record: "item"},[
       {name: 'Name', mapping: 'Name'},
       {name: 'Num'},
       {name: 'PassWord'}           
     ]);
     ///读取JSON数据格式
     var jread=new Ext.data.JsonReader({
            root: 'Rows',
            totalProperty: 'RecordCount',
        fields: [
            {name: 'Num', type: 'string'},
            {name: 'PassWord', type: 'string'},
            {name: 'Name', type: 'string'}
        ],remoteSort: true
        })
     ///jprox.load("",jread,xym,this);
///数据存储
     var store=new Ext.data.GroupingStore({
        ///远程数据代理
        proxy:jprox,
        ///从数据代理中读取数据
        reader:jread,
        ///用户分子的字段
        groupField:'Name',
        ///是否启用分组排序
        groupOnSort:true,
        ///分组信息的关键  Desc 倒序  Asc 正序
        sortInfo:{field:'Name', direction: "Desc"}
        /// 其他 remoteGroup  是否支持远程排序
     });
       store.load();
       /// store.loadData(serJosn);
    //定义列结构
       var col=new Ext.grid.ColumnModel([
            ///自动自增的数字列 与数据列绑定也是无效的
            new Ext.grid.RowNumberer({header:'序号',width:35}),
            ///renderer 表示填充数据时 调用的函数 达到自动调整数和格式的作用 。
            ///header 显示的列名        dataIndex 与reader 绑定的列
            ///hidden  是否隐藏本列     resizable 可调整大小
            {header:'应长',dataIndex:'Num',hidden:true},
            {header:'正式姓名',dataIndex:'Name',renderer:xm,editor: new Ext.form.TextField({
                   allowBlank: true
               })},
            {header:'职业',dataIndex:'PassWord',editor:new Ext.form.TextField({
                   allowBlank: true
               })}
        ]);
    ///视图  
    var view=new Ext.grid.GroupingView({
            ///是否自动填充
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "多条" : "条"]})',
            ///排序描述
            sortAscText:'正向排序',
            ///排序描述
            sortDescText:'反向排序',
            ///菜单提示 显示 隐藏列
            columnsText:'显示列/隐藏列',
            //显示分组菜单
            enableGroupingMenu:true,
            ///内容为空时 提示的文本内容
            emptyGroupText:'AAAA',
            ///菜单中的分组描述字段
            groupByText:'按此分组',
            ///分组显示的开关
            showGroupsText:'是否显示分组',
            ///显示隐藏进行分徐的列
            hideGroupedColumn:false,
            ///是否使用IFrame
            frame:true
        })

    ///分组GROD
      var grid=new Ext.grid.EditorGridPanel({
            height:500,
            width:900,
            store:store,
            ///是否准许收缩
            collapsible: true,
            ///是否在收缩时 准时使用动画
            animCollapse: true,
            cm:col,
            view:view,
            ///是否准许显示面板标题信息
            headerAsText:true,
            ///面板标题消息
            title: '地区信息',
            collapseFirst:false,
            iconCls: 'icon-grid',
            loadMask:true,
            ///maskDisabled:true,
            ///loadMask: {msg:'正在加载数据,请稍侯……'},
            ///可编辑则不能拖动
            //enableDragDrop:true,
            monitorWindowResize:true,
            ///鼠标移到后 是否高亮显示
            trackMouseOver:true,
            enableColumnHide:true,
            autoShow:true,
            ///表格行是否按照不同的样式显示
            stripeRows:false,
            tbar:
            [{text: '提交更改',id:'ADD',tooltip:'把修改的数据保存起来',iconCls:'remove',disabled:false,handler:function (){
                store.commitChanges();
            }},{text:"取消更改",handler:function(){
                store.rejectChanges();
            }},{text:"移除所有",handler:function(){
                store.removeAll();
            }},{text:"重新加载",handler:function(){
                store.load();
            }},{text:"移除选择行",handler:function(){
                var sm=grid.getSelectionModel();
                if(!sm.selection)return;
                var record=sm.selection.record;
                    store.remove(record)
            }},
                {text:"增加行",handler:function(){
                var value={NAME:'新增加',PassWord:'新增加'};
                var re=new Ext.data.Record(value);
                store.add(re);
            }},{text:"更新",handler:function(){
                alert("asdf");
            }},{text:"增加新行",handler:function(){
                var value={NAME:'请编辑新行',PassWord:'请编辑新行'};
                var re=new Ext.data.Record(value);
                store.add(re);
                ///grid.startEditing(1,2);
            }},{text:"修改选择行",handler:function(){
                var sm=grid.getSelectionModel();
                if(!sm.selection)return;
                var row =sm.selection.cell[0];
                var vrow=sm.selection.cell[1];
                var record=sm.selection.record;
                   grid.startEditing(row,vrow);
            }},{text:"获取信息保存",handler:function(){
                alert(store.data);
            }},{text:"查看所有修改",handler:function(){
                ///获取所有修改的数据
                var records = store.getModifiedRecords();
                if(records.length>0)
                {
                    var str="";
                    for(var i=0;i<records.length;i++)
                    {
                        record=records[i];
                        if((i+1)==records.length)
                        {
                            str+=Ext.encode(record.data);
                        }
                        else
                        {
                            str+=Ext.encode(record.data) +',';
                        }
                    }
                    ///向服务器发送数据进行保存
                    Ext.Ajax.request(
                    {
url:"../DataService.aspx?Action=SAVE",
                        params:str,
                        success:toss,
                        failure:toss
                    })
                    alert(str);
                }
            }}
            ],
            renderTo:"ManagerGird"
            });  
        ///grid.load();
        ///重写

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值