UAP DataGrid 赋值

  上一篇博客说了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' onclick=\"_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的也是比较熟悉了。