上一篇博客说了DataForm的赋值和保存,这篇文章就在回忆一下datagrid的一些常用方法。
下面的代码是实现一个gird的方法
function _initDataGrid()
{
var restUrl = "~/rest/ivsmonthplan/";
/* 初始化 EntityContainer */
var gridEntityContainer = new mx.datacontainers.GridEntityContainer({
baseUrl : totalPlan.mappath(restUrl),
iscID : "-1", // iscID 是数据元素的统一权限功能编码。默认值为 "-1" ,表示不应用权限设置。
primaryKey: "planId"
});
/* 初始化 DataGrid */
_dataGrid = new mx.datacontrols.ComplexGrid({
// 构造查询属性。
alias: "totalPlanMainViewDataGrid",
searchBox: new mx.datacontrols.DataGridSearchBox({
fields: [
{ name: "startDate", caption: "创建开始时间", editorType: "DateTimeEditor" },
{ name: "endDate", caption: "创建结束时间", editorType: "DateTimeEditor"},
{ name: "state", caption: "状态", editorType: "DropDownEditor"}
]
}),
columns:[
{ name: "planId", caption: "计划Id", editorType: "TextEditor",visible:false},
{ name: "planNum", caption: "计划编号" , editorType: "TextEditor",
renderCell: function(p_item, $p_cell)
{
var value = null;
if (p_item.getValue("planId")!=null && p_item.getValue("planId")!="")
{
var planNum = p_item.getValue("planNum");
var planId = p_item.getValue("planId");
var status = p_item.getValue("state");
var isDelay = p_item.getValue("isDelay");
var workItemId = p_item.getValue("workItemId");
//var workItemId = 0;
value = $("<a style='cursor:pointer' οnclick=\"_btnEdit_onclick(\'"+planId +"'\,'" + planNum +"'\,'" + status + "'\,'" + isDelay +"'\,'" + workItemId +"\')\">"+planNum+"</a>");
}
$p_cell.html(value);
}
},//设置表格可编辑后可以连接 editorType: "LinkEditor",autoHref:true,hrefUrl : "http://www.baidu.com"
{ name: "createDate", caption: "月份" , editorType: "DateTimeEditor",formatString:"yyyy-MM" },
{ name: "totalProject", caption: "项目总数" , editorType: "TextEditor" },
{ name: "completeProject", caption: "完成项目数" , editorType: "TextEditor" },
{ name: "planMemo", caption: "计划说明" , editorType: "TextEditor" },
{ name: "state", caption: "状态" , editorType: "DropDownEditor" },
{ name: "isFinish", caption: "是否完成" , editorType: "TextEditor" },
{ name: "change", caption: "是否可以变更" , editorType: "TextEditor",visible:false},
{ name: "workItemId", caption: "工作项id" , editorType: "TextEditor",visible:false},
{ name: "planCode", caption: "planCode" , editorType: "TextEditor",visible:false},
{ name: "isDelay", caption: "是否延期" , editorType: "TextEditor",
renderCell: function(p_item, $p_cell)
{
var value = null;
if (p_item.getValue("isDelay")!=null && p_item.getValue("isDelay")!="")
{
var str = p_item.getValue("isDelay");
if(str=="延期"){
value = $("<span style=\"color:red\">"+str+"</span>");
}
}
$p_cell.html(value);
} }
],
// 构造列排序条件,如果有多列,则以逗号分隔。例sorter: "school ASC, class DESC"
sorter:"createTime DESC",
displayColSplitLine:true, //是否出现分隔线
displayCheckBox: true, //是否显示复选框
displayPrimaryKey:false,//列表是否显示主键
allowEditing: false, //列表默认不可编辑
pageSize : 20,
entityContainer: gridEntityContainer
});
//重置toolBar按钮项
me.addControl(_dataGrid);
}
在上面的代码中searchbox是grid的查询条件,里面不支持间隔查询比如这个searchbox中的时间查询就需要添加两个时间控件,这两个时间控件是相互没有影响的,如果想要达到一定的效果就需要自己去设定值了。
renderCell也是datagrid column的一个常用方法,作用就是根据这一列的值来做一定的修饰,比如写成一个herf链接(第一个renderCell)或者就是修饰字体颜色(如上面的grid第二个renderCell)
grid里面的一些控件和上篇博客form的是一样的,都可以加上相应的参数进行修饰。
在grid的属性中sorter是排序条件,不过似乎不好用。在项目中都是通过后台order by来进行排序的。
grid和form都有一个onsaved的事件都是在保存以后才会触发的。
数据加载时可以设定grid的查询参数,也就是setFilter里面的值,采用json数据格式
me.load = function()
{
_dataGrid.setFilter({monthPlanNum:me.planNum,planId:me.planId});
_dataGrid.load({},function(){
selectCheckeBox();
});
}
load完成以后调用方法selectCheckeBox,可以对加载完的数据进行修饰。
开始使用gird的时候好多方法和属性都用的不熟,通过查API还有和同事之间交流现在对gird的也是比较熟悉了。