Grid实例RDUC
来源：互联网 发布：网络培训课程 编辑：程序博客网 时间：2024/06/05 05:40
@*------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:"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("提示信息","您没有选中任何行!");
}elseif(row.length>1){
Ext.Msg.alert("提示信息","对不起只能选择一个!");
}elseif(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: "1到10位数字可有小数点-第一位不允许有小数点"//正则表达报错
}, {
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>
- Grid实例RDUC
- Grid的使用实例
- EXT 中的Grid实例
- Ext.grid.GroupingView 实例
- Ext.grid.EditorGridPanel 实例
- GT-Grid的实例
- Extjs学习 Grid实例
- jq Grid实例中文版
- extjs grid搜索分页实例
- EXTJs中Grid合计实例
- ExtJS——Grid实例
- GT-Grid的实例使用：
- Extjs4 可编辑grid实例
- [代码实例][gtk+]Grid布局
- 14.1 zeroc ice grid 实例
- 14.2 zeroice Grid 实例2
- ExtJs之Grid渲染function实例暗记
- 960 Grid System 基本使用实例
- 根据当前目录查找相对路径的文件
- 向下展开菜单 隐藏展开菜单
- MulticastSocket 广播学习
- classloader 简单介绍
- watchdog in android
- Grid实例RDUC
- 运行jar应用程序引用其他jar包的四种方法
- URLClassLoader 学习笔记
- AWK简介及使用实例
- JavaEE知识整理系列（一）JavaEE概述 .
- Condition使用---线程通信
- (笔记)viewpager显示同时显示多页
- java （双）链表实现
- [SQL Server]统计SQL Server 报表的订阅情况
