Ext 排序 分页 表格拖动

Ext.onReady(function () {


                var url=window.location.href;
                var id;
                if(url.indexOf("ID=")!=-1)
                {
                    id=url.split("ID=")[1];
                }
                //alert(id);
   
       var store = new Ext.data.JsonStore({
        root: "data",
        totalProperty: "totalCount",
        idProperty: 'threadid',
        remoteSort: true,
        fields: [{ name: "UserId", mapping: 'UserId', type: 'int' },
            { name: "Username", mapping: 'Username', type: 'string' },
            { name: "Sex", mapping: 'Sex', type: 'string' },
            { name: "Tel", mapping: 'Tel', type: 'string' },
            { name: "ProType", mapping: 'ProType', type: 'string' },
            { name: "AboutProject", mapping: 'AboutProject', type: 'string' },
            { name: "Post", mapping: 'Post', type: 'string' },
            { name: "CompanyName", mapping: 'CompanyName', type: 'string' },
            { name: "Reseach", mapping: 'Reseach', type: 'string' },
            { name: "Prodo", mapping: 'Prodo', type: 'string' },
            { name: "Year_reseach_count", mapping: 'Year_reseach_count', type: 'int' },
            { name: "Nowrcount", mapping: 'Nowrcount', type: 'int' },
            { name: "SortIndex", mapping: 'SortIndex', type: 'int'}],
              //默认排序方式
               sortInfo: {field:'SortIndex', direction:'ASC'},
            //远程排序
            remoteSort: true,
        proxy: new Ext.data.HttpProxy({ url: 'ProjectMerbers.aspx?ItemId='+id})
    });
    //store.setDefaultSort('SortIndex', 'ASC');
    store.load({ params: { start: 0, limit: 100} });
   
    var cm = new Ext.grid.ColumnModel({
        defaultWidth: 70,
        columns: [
            //{ header: '编号',sortable: true, dataIndex: "UserId" },
            { header: '序号',sortable: true, dataIndex: "SortIndex"},
            { header: '姓名', dataIndex: "Username" },
            { header: '性别',sortable: true, dataIndex: "Sex" },
            { header: '联系电话', dataIndex: "Tel" },
            { header: '成员类型',sortable: true, dataIndex: "ProType" },
            //{ header: '相关项目', dataIndex: "AboutProject" },
            { header: '职称', dataIndex: "Post" },
            { header: '单位名称', dataIndex: "CompanyName" },
            { header: '研究方向', dataIndex: "Reseach" },
            { header: '项目分工', dataIndex: "Prodo" },
            { header: '年研究项目',sortable: true, dataIndex: "Year_reseach_count" },
            { header: '在研项目数', sortable: true,dataIndex: "Nowrcount" }
           
            ]
    });
   
   
    var pageing=new Ext.PagingToolbar({
            pageSize: 100,
            store: store,
            displayInfo: true,
            displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
            emptyMsg: "无显示数据"
        });

    var grid = new Ext.grid.GridPanel({
        cm: cm,
        store: store,
        height: 460,
        width: 850,
        title: '项目成员',
        id:'mygrid',
        loadMask: true,
        enableDragDrop: true,
        trackMouseOver:true,
        bbar:pageing,
        tbar:[{
                    id: 'btnAdd',
                    text: '保存排序方式',
                    tooltip: '保存排序方式',
                    iconCls: 'save',
                    handler: showAddPanel
                }],
         view: new Ext.grid.GridView({
                forceFit:true,
                sortAscText :'正序',
                sortDescText :'倒序',
                columnsText:'列显示/隐藏'
                }),
        loadMask: {msg:'正在加载数据,请稍侯……'},
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            getRowClass : function(record, rowIndex, p, ds){
                return 'x-grid3-row-collapsed';
            }
        }
    });
   

    grid.render('demo');

      function showAddPanel() {
       // Ext.lib.Ajax.defaultPostHeader = 'application/json';
       // alert(Ext.util.JSON.encode(store));
      
       var recordData=[];
       var grid=Ext.getCmp('mygrid');
       Ext.each(grid.getStore().getRange(),function(record){
        recordData.push(record.data);
       });
       var jsonData=Ext.encode(recordData);
        Ext.Ajax.request({
            //url:请求地址  
            url: 'ProjectMerbers.aspx',
            //params :参数列表  
            params: {
                //取得store
                save: jsonData
                },
                waitMsg:'正在提交数据,请稍等...',
                waitMsgTarget:true,
            //success:响应成功后的回调函数  
            success: function (f) {
                // alert(f.responseText);
               var json= f.responseText;
               //var msg=json.Msg.toString();
               Ext.Msg.alert("系统提示:",json);
               //pageing.refresh();
               store.load({ params: { start: 0, limit:100} });
             
            },
            //failure:处理当http返回是404或500的错误,不是业务错误     
            failure: function (f) {
                Ext.Msg.alert("错误", "无法访问后台");
            }
        });
     
      }
    var ddrow = new Ext.dd.DropTarget(grid.container, {
        ddGroup: 'GridDD',
        copy: false,
        notifyDrop: function (dd, e, data) {
            // 选中了多少行
            debugger
            var rows = data.selections;
            // 拖动到第几行
            var index = dd.getDragData(e).rowIndex;
            if (typeof (index) == "undefined") {
                return;
            }
            // 修改store
            for (i = 0; i < rows.length; i++) {
                var rowData = rows[i];
                if (!this.copy) store.remove(rowData);
                store.insert(index, rowData);
            }
        }
    });
});

服务页面:

  int start = int.Parse(Request.Form["start"]==null?"0":Request.Form["start"]);      //分页需要limit,start是mysql里用的(或取当页开始的记录标识编号)
                    int limit = int.Parse(Request.Form["limit"]==null?"25":Request.Form["limit"]);  //或取每页记录数
                    string sort = Request.Form["sort"]==null?"SortIndex":Request.Form["sort"];            //或取排序方向
                    string dir = Request.Form["dir"]==null?"ASC":Request.Form["dir"];              //或取所要排序的字段名

 

posted @ 2010-07-28 15:45  3.mu  阅读(931)  评论(0)    收藏  举报