UAP DataGrid 赋值

JS 同时被 2 个专栏收录
19 篇文章 0 订阅
7 篇文章 0 订阅

  上一篇博客说了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的也是比较熟悉了。

  • 1
    点赞
  • 2
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

jiudihanbing

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值