Grid实例RDUC

最新推荐文章于 2019-12-16 19:33:43 发布

p419228530

最新推荐文章于 2019-12-16 19:33:43 发布

阅读量1.8k

点赞数

分类专栏： Ext

本文链接：https://blog.csdn.net/p419228530/article/details/17114235

版权

Ext 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

//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: "1到10位数字可有小数点-第一位不允许有小数点"//正则表达报错

})

},{

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,'Y年m月d日') },//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); //EditorGridPanel的afteredit事件监听

//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-------*@

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

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

var EditMessageForm = newExt.form.FormPanel({

width:375,

height:280,

plain: true,

defaultType: "textfield",

labelWidth: 100,

plain: true,

baseCls: "x-plain",

//锚点布局-

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

buttonAlign: "center",

bodyStyle: "padding:00 0 0",

items:[{

fieldLabel: "编号",

readOnly: true

}, {

fieldLabel: "标题",

allowBlank: false,//不允许为空

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

}, {

fieldLabel: "内容",

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

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

}, {

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();

}

}, {

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>

p419228530

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Grid实例RDUC

@*------Grid操作-------*@script> //var messageList=[[1,'title','content','1','2013-09-17']]; //var messagetypeList = @Html.Raw(ViewBag.MessageType); function ChangeDateForma
复制链接

扫一扫

专栏目录