关闭

Grid实例RDUC

1623人阅读 评论(0) 收藏 举报
分类:

@*------Grid操作-------*@

<script>

    //var messageList=[[1,'title','content','1','2013-09-17']];

    //var messagetypeList = @Html.Raw(ViewBag.MessageType);

   

    function ChangeDateFormat(cellval) {

       var date = newDate(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));

       var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth()+ 1;

       var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

        return date.getFullYear() + "" + month + "" + currentDate+"";

    }

 

 

   Ext.onReady(function () {

       

        //下拉数据加载

       var messageTypeData = [

           ['非常紧急', '1'],

           ['紧急', '2'],

           ['一般', '3']

        ];

       var messageTypeStore = new Ext.data.SimpleStore({

           fields: [

               { name: 'text' },

               { name: 'id' }

            ]

        });

       messageTypeStore.loadData(messageTypeData);

 

        //分页每页显示数量    

       var pageSize = 10;

        //指定列参数

       var messagestore = new Ext.data.Store({        

                proxy:new Ext.data.HttpProxy(

                 {

                      url:'@Url.Action("Message","ExtDemo")',

                 }),

                reader: new Ext.data.JsonReader({

                    //fields:fields,

                    root: "Rows",

                    id:"id",

                    totalProperty: 'totalCount'

               }, [

                   { name: 'id' },

                   { name: 'title', type: 'string' },

                   { name: 'messagecontent', type: 'string'},

                   { name: 'messagetype', type: 'string' },

                   { name: 'createdate', type: 'date' }

                   //{ name: 'createdate', type:'date',renderer:ChangeDateFormat, dateFormat:'yyyy-MM-dd' }

               ])

        });

        //加载时参数传递

       messagestore.load({params:{start:0,limit:pageSize}});

 

        //列选择模式--------------------------------------------------

       var sm = newExt.grid.CheckboxSelectionModel({

           dataIndex:"id"

        });

        //列头--------------------------------------------------

       var cm = newExt.grid.ColumnModel([

            sm,{

               header:"编号",

                dataIndex:"id",

               //列不可操作

                //menuDisabled:true,

               //可以进行排序               

                sortable:true

            },{

               header:"标题",

                dataIndex:"title",

                sortable:true

            },{

               header:"内容",

                dataIndex:"messagecontent",

                sortable: true,

                editor: new Ext.form.TextField({

                    allowBlank: false,

                    regex: /^[^.][0-9.]{1,10}$/,

                   regexText: "110位数字可有小数点-第一位不允许有小数点"//正则表达报错

               })

            },{

               header:"状态",

                dataIndex:"messagetype",

                sortable: true,

                renderer: function (value) {

                   return value == '1' ? '非常紧急' : (value == '2' ? '紧急' : '一般');

               },

                editor: new Ext.form.ComboBox({

                    typeAhead: true,

                   store: messageTypeStore,

                    editable: false,

                    displayField: 'text',

                    valueField: 'id',

                    mode: 'local',

                    triggerAction: 'all',

               })

            },{

               header:"时间",

               tooltip: "时间",

                xtype: 'datefield',

                //renderer:ChangeDateFormat,

               renderer: function (value) { return Ext.util.Format.date(value,'Ymd') },//y取后两位:Y取完整年,m数字月:M英文月(-/表示格式)

                dataIndex:"createdate",

                sortable: true,

                editor: new Ext.form.DateField({

                    allowBlank: false

               })

            }]);

        //设置列格式-----------------------------------------------------

       cm.setRenderer(3,getColor);

       function getColor(val)

        {

           if (val != "")

            {

                return '<fontcolor=blue></font><span style="color:red;">' + val + '</span>';

            }

        }

  

        //右键菜单-----------------------------------------

       var MessageRightClick=new Ext.menu.Menu

            ({

               items:

               [{

                   text: '添加',

                    iconCls: 'icon-add',

                   handler:AddFn

               },{

                   text:'编辑',

                    iconCls: 'icon-edit',

                   handler:EditFn

               },{

                   text:'删除',

                    iconCls: 'icon-delete',

                   handler:DeleteFn

               }]

            });

        //定义grid----------------------------------------------------

       var grid = newExt.grid.EditorGridPanel({

           renderTo: 'grid',

           id:"messagegrid",

           store:messagestore,

           sm:sm,

           cm:cm,

           loadMask: true,

           height:400,

            //自适应宽度 参数为列数

           autoExpandColumn:5,

            //超过长度带自动滚动条

           autoScroll:true,

           border: false,

           frame:true,

           clicksToEdit: true,           

           viewConfig:{

               columnsText:"显示/隐藏列",

               sortAscText:"正序排列",

               sortDescText:"倒序排列"

            },

            //分页

           bbar:new Ext.PagingToolbar({

               store:messagestore,

               pageSize:pageSize,

               //显示右下角信息

                displayInfo:true,

               displayMsg:'当前记录 {0} -- {1} {2} 条记录',

                emptyMsg:"No results to display",

               prevText:"上一页",

               nextText:"下一页",

               refreshText:"刷新",

               lastText:"最后页",

               firstText:"第一页",

               beforePageText:"当前页",

               afterPageText:"{0}"

            }),

           tbar:[

           new Ext.Toolbar.Fill()

            ,{

               text:"添加",

               //默认样式为按下

                //pressed:true,

               tooltip:"添加",

                iconCls:"addicon",

               handler:AddFn

           },"","-","",{

               text:"编辑",

               tooltip:"编辑",

                iconCls:"editicon",

               handler:EditFn

           },"","-","",{

               text:"删除",

               tooltip:"删除",

                iconCls:"deleteicon",

               handler:DeleteFn

           },"-"],

           listeners:{

                'contextmenu':function(e){

                   e.stopEvent();

               },

                'rowcontextmenu':function(grid,rowIndex,e){

                   e.stopEvent();

                   MessageRightClick.showAt(e.getXY());

               },

               //方法一

                //'afteredit': function (e) {

               //    e.row;//修改過的行從0開始  

               //    e.column;//修改列  

               //    e.originalValue;//原始值  

               //    e.value;//新值

                //    alert(e.row +"==" + e.column + "==" + e.originalValue + "==" +e.value);

                //},

           }          

        });

        //定义grid

        //************************************添加grid事件***************************

        //方法二

       grid.on('afteredit', function (e) { //获得Ext.grid.EditorGridPanel编辑信息

           e.row;//修改過的行從0開始  

           e.column;//修改列  

           e.originalValue;//原始值  

           e.value;//新值  

           e.grid;//当前修改的grid  

           e.field;//正在被编辑的字段名  

           e.record;//正在被编辑的行

           alert(e.row + "==" + e.column + "==" + e.originalValue + "==" + e.value + "==" + e.grid + "==" + e.field + "==" +e.record.id);

        });

        //方法三

        //grid.on("afteredit",afterEdit, grid); //EditorGridPanelafteredit事件监听  

       //functionafterEdit(obj) {

        //    var r = obj.record;//获取被修改的行  

       //}

       //****************************************************************************

 

    });

 

 

 

    //删除选中行--------------------------------------------------------

   DeleteFn=function()

    {

        //得到多个record对象

       var row = Ext.getCmp("messagegrid").getSelectionModel().getSelections();

       if(row.length==0){

           Ext.Msg.alert("提示信息","请您至少选择一个!");

        }

       else

           Ext.Msg.confirm("提示!","您确定要删除该房间类型信息吗?",function(btn){

                if(btn=="yes")

               {

                    var deletesplit="";

                    for(var i=0;i<row.length;i++){

                        if(row.length==1){

                           deletesplit=row[i].data.id;

                       }

                        else{

                            if(i<(row.length-1)){

                                deletesplit =row[i].data.id + "," + deletesplit;

                            }

                            if(i==(row.length-1)){

                                deletesplit =deletesplit + row[i].data.id;

                            }

                       }

                   }

 

                   //提交到后台

               }

                else{

                  

               }

            })

        } 

    }

 

 

    //-----------------------------------------------------修改选中行

   EditFn=function()

    {

       var row = Ext.getCmp("messagegrid").getSelectionModel().getSelections();

       if(row.length==0){

           Ext.Msg.alert("提示信息","您没有选中任何行!");

       }else if(row.length>1){ 

           Ext.Msg.alert("提示信息","对不起只能选择一个!");

       }else if(row.length==1){

            //调用修改房间类型函数

            //EditMessageInfo(row[0].data.typeid);//传入ID查数据库

           EditMessageInfo(row[0]);//传行一行记录直接加载

        }

                   

    }

 

    //------------------------------------------------------增加房间信息

   AddFn=function()

    {

       alert('add');

 

      @*

      $.post('@Url.Action("GetMessaageJson","MessageDemo")', { mtype: 1 }, function (json) {

 

        });

      $.post("<%=PushPath %>", { dt: JSON2.stringify(data.dt).toString(), FieldType: "<%=FieldType %>" }, function(result) { alert(result); }, "text");

      *@

       //AddMessageInfo();

    }   

</script>

 

 

 

@*-------Edit-------*@

<script>

    var typeids = "";//获得传入ID

    var rows = "";//获得传入数据

 

    var EditMessageForm = newExt.form.FormPanel({

        width:375,

        height:280,

       plain: true,

       layout: "form",

       defaultType: "textfield",

       labelWidth: 100,

       plain: true,

       baseCls: "x-plain",

        //锚点布局-

       defaults: { anchor: "95%", msgTarget: "side" },

       buttonAlign: "center",

       bodyStyle: "padding:00 0 0",

        items:[{

           name: "id",

           fieldLabel: "编号",

           readOnly: true

        }, {

           name: "title",

           fieldLabel: "标题",

           allowBlank: false,//不允许为空

           blankText: "标题不允许为空"///快速提示框

        }, {

           name: "messagecontent",

           fieldLabel: "内容",

           //regex:/^[^.][0-9.]{1,10}$/,

            //regexText: "110位数字可有小数点-第一位不允许有小数点"//正则表达报错

        }, {

           name: "messagetype",

           id: "messagetypecombo",

           xtype: "combo",

           fieldLabel: "状态",

           readOnly: true,

           mode: "local",

           displayField: "text",

           valueField: "messagetype",

           triggerAction: "all",

           value: "一般",

           store: new Ext.data.SimpleStore({

                fields: [{name:'messagetype'}, {name:"text"}],

               data: [[1,"非常紧急"], [2,"紧急"], [3,"一般"]]

            }),listeners: {

                "beforeselect": function (combo, record) {

                   if (record.data.messagetype == "一般") {

                        //禁用该组件

                        combo.ownerCt.findById("createdate").disable();

                        //combo.ownerCt.findById("createdate").setValue("2013-09-18");//选择出错

                   }

                    else {

                        //启用该组件

                        combo.ownerCt.findById("createdate").enable();

                   }                   

               }

            }

        }, {

           name: "createdate",

           id: "createdate",

           xtype: "datefield",//??

           fieldLabel: "时间",

           allowBlank: false,//不允许为空

           blankText: "时间不允许为空",///快速提示框

        }]

    });

 

 

    var EditMessagewin = new Ext.Window({

       title: "修改信息",

        width:410,

        height:300,

       plain: true,

       //layout:"form",

       iconCls: "editicon",

        //不可以随意改变大小

       resizable: false,

        //是否可以拖动

       //draggable:false,

       defaultType: "textfield",

       labelWidth: 100,

       collapsible: true, //允许缩放条

       closeAction: 'hide',

       closable: true,

       plain: true,

        //弹出模态窗体

       modal: 'true',

       buttonAlign: "center",

       bodyStyle: "padding:8px0 0 10px",

        items:[EditMessageForm],

       listeners: {

           "show": function (){

               EditMessageForm.getForm().loadRecord(rows);//直接加载一行数据

               //设置combo状态

                //var text =EditMessageForm.findByType("combo")[0].value;

               //text =text == '1' ? '非常紧急' : (text == '2' ? '紧急' : '一般');

                //EditMessageForm.findByType("combo")[0].setValue(text);

               

               if (EditMessageForm.findByType("combo")[0].value == "一般") { 

                   //禁用该组件

                    EditMessageForm.findById("createdate").disable();

                    //EditMessageForm.findById("createdate").setValue("0.00");

               }

                else {

                   //否则启动该组件

                    EditMessageForm.findById("createdate").enable();

               }

            }

        },

        buttons:[{

           text: "保存信息",

           minWidth: 80,

           handler: function () {

                if(EditMessageForm.getForm().isValid()) {

                   //弹出效果

                   Ext.MessageBox.show

                   (

                       {

                            msg: '正在保存,请稍等...',

                            progressText: 'Saving...',

                            width: 300,

                            wait: true,

                            waitConfig: {interval: 200 },

                            icon: 'download',

                            animEl: 'saving'

                       }

                   );

                    setTimeout(function () { }, 1000);

                    //EditMessageForm.getForm().submit({

                   //    url:"URL/Message/SaveRoomType.aspx",//后台取值Request.Form['id']

                    //   method: "POST",

                    //   success: function (form, action) {

                   //        //成功后

                    //       var flag = action.result.success;

                    //       if (flag == "true") {

                   //            Ext.MessageBox.alert("恭喜", "添加房间类型信息成功!");

                    //            //grid.store.reload();

                    //            Messagestore.reload();

                    //            EditMessagewin.hide();

 

                    //       }

                    //   },

                    //   failure: function (form, action) {

                   //        Ext.MessageBox.alert("提示!", "保存房间类型信息失败!");

                    //   }

                    //});

               }

            }

        }, {

           text: "重置",

           minWidth: 80,

           handler: function () {

               EditMessageForm.getForm().loadRecord(rows);//直接加载一行数据

               //设置combo状态

               if (EditMessageForm.findByType("combo")[0].value == "一般") {

                   //否则启动该组件

                    EditMessageForm.findById("createdate").enable();

               }

                else {

                   //禁用该组件

                    EditMessageForm.findById("createdate").disable();

                    //EditMessageForm.findById("createdate").setValue("0.00");

               }

 

            }

        }, {

           text: " ",

           minWidth: 80,

           handler: function () {

               EditMessagewin.hide();

            }

        }]

 

    });

 

    function EditMessageInfo(row) {

       //typeids=typeid;

        rows =row;

       EditMessagewin.show();

    }

</script>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:126391次
    • 积分:1679
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:9篇
    • 译文:0篇
    • 评论:4条
    最新评论