.cs文件的主要代码:
publicclassUser_List//这个类是对应是Extjs的Grid的field里面的,field有几项就写几项{publicintVoteID=0;publicstringVoteName="";publicDateTime SystemDateTime=DateTime.Parse(DateTime.Today.AddDays(1).ToString("yyyy-MM-dd"));publicDateTime EndTime=DateTime.Parse(DateTime.Today.AddDays(1).ToString("yyyy-MM-dd"));publicstringIsStatus="禁用";publicintSubmitTimes=0;
}protectedListlst=newList();//创建数组protectedUser_List userlst=newUser_List();//定义的类设置对象for(inti=0; i
userlst=newUser_List();//每次循环就新定义对象,不然复制的都是同一组值,每次覆盖原来复制的(这个很重要)userlst.VoteID=(int)dt.Rows[i]["VoteID"];
userlst.VoteName=dt.Rows[i]["VoteName"].ToString();
userlst.SystemDateTime=DateTime.Parse(dt.Rows[i]["SystemDateTime"].ToString());
userlst.EndTime=DateTime.Parse(dt.Rows[i]["EndTime"].ToString());
userlst.IsStatus=dt.Rows[i]["IsStatus"].ToString();
userlst.SubmitTimes=(int)dt.Rows[i]["SubmitTimes"];
lst.Add(userlst);
}//下面的代码就是将数据库的值转化为Json的主要代码JavaScriptSerializer java=newJavaScriptSerializer();
StringBuilder sb=newStringBuilder();
java.Serialize(lst, sb);stringjson=sb.ToString();
json="{totalPorperty:"+dt1.Rows[0]["totalPorperty"].ToString()+",root:"+json+"}";returnjson;
.js文件中:
cm代码:
cm=newExt.grid.ColumnModel(//对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的[newExt.grid.RowNumberer(), Vote_List_sm,
{ header:"问卷名", width:250, sortable:true, align:'center', dataIndex:'VoteName'},
{ header:"创建时间", width:200, sortable:true, align:'center', dataIndex:'SystemDateTime'},
{ header:"结束时间", width:200, sortable:true, align:'center', dataIndex:'EndTime'},
{ header:"状态", width:200, sortable:true, align:'center', dataIndex:'IsStatus'},
{ header:"投票次数", width:200, sortable:true, align:'center', dataIndex:'SubmitTimes'}
]);
field代码:
fields=[//设置显示的列名的变量名和变量类型{name:'VoteID', type:'int'},
{ name:'VoteName', type:'string'},
{ name:'SystemDateTime', type:'datetime'},
{ name:'EndTime', type:'datetime'},
{ name:'IsStatus', type:'string'},
{ name:'SubmitTimes', type:'int'}
];
store代码:
store=newExt.data.Store
({//store用来创建一个数据存储对象,是GridPanel必备的属性proxy:newExt.data.HttpProxy({ url: Vote_List_url }),//是指获取数据的方式totalProperty:'totalPorperty',//表示后台传过来的参数以totalPorperty开始的为数据的总条数reader:newExt.data.JsonReader({ totalProperty:"totalPorperty", root:"root", fields: Vote_List_fields }),
remoteSort:false,
sortInfo: { field:'VoteID', direction:"DESC"}//设置排序方式,按Userid降序排列,新插的信息显示在最上面});
在Extjs的Grid中显示的数据的写法和普通的格式一样。但是显示出来后的样子确实这样的:
细心的朋友会发现,datetime的格式的数据显示出来的是乱码一样的东西,这个纠结了很久。查了网上的很多资料,找到一篇比较好的,和大家一起分享下。
从数据库中取出来的时间类型的数据,Json化以后会出现形如:\/date(125465701)\/ 样子的数据,这样的数据在Grid中无法直接显示成合法的日期形式。这个要在前台处理一下。首先定义个函数:
//转换为可显示日期
function Todate(v) {
if(v == null)
{
return null;
}
var d = new Date();
var str = v.toString();
var str1 = str.replace("/Date(", "");
var str2 = str1.replace(")/", "");
var dd = parseInt(str2);
d.setTime(dd); return d;
};
在Store里面只对日期这个选项做如下设置:
{ name: 'TXRQ', type: 'date', dateFormat: 'Y-m-d', convert: Todate }
在ColumnModel中要做如下设置:
{ header: '填写日期',
dataIndex: 'TXRQ',
renderer: Ext.util.Format.dateRenderer('Y年m月d日'),
sortable: true,
width: 95
}
这样就可以显示正常显示日期数据了数据。
所以,我们的cm代码要改成:
cm=newExt.grid.ColumnModel(//对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的[newExt.grid.RowNumberer(), Vote_List_sm,
{ header:"问卷名", width:250, sortable:true, align:'center', dataIndex:'VoteName'},
{ header:"创建时间", width:200, sortable:true, align:'center', dataIndex:'SystemDateTime',renderer: Ext.util.Format.dateRenderer('Y年m月d日') },
{ header:"结束时间", width:200, sortable:true, align:'center', dataIndex:'EndTime', renderer: Ext.util.Format.dateRenderer('Y年m月d日') },
{ header:"状态", width:200, sortable:true, align:'center', dataIndex:'IsStatus'},
{ header:"投票次数", width:200, sortable:true, align:'center', dataIndex:'SubmitTimes'}
]);
field部分代码要改成:
fields=[//设置显示的列名的变量名和变量类型{name:'VoteID', type:'int'},
{ name:'VoteName', type:'string'},
{ name:'SystemDateTime', type:'datetime', dateFormat:'Y-m-d', convert: Todate },
{ name:'EndTime', type:'datetime', dateFormat:'Y-m-d', convert: Todate },
{ name:'IsStatus', type:'string'},
{ name:'SubmitTimes', type:'int'}
];
再就可以改好格式了,成功后的结果:
是不是很简单,挺完美的吧!欢迎大家一起学习一起交流!
鸣谢:Ya飞