flexigrid 绑定事件process以及对行列的操作

2020-11-09 10:22:00 浏览数 (2)

代码语言:javascript复制
$(document).ready(function(){
			$("#ListGrid").flexigrid({ 
		        width: '1000',  
		        height: 350,  
		        url: 'monthPlanList.action',  
		        dataType: 'json',
		        colModel : [
					{display: 'id', name : 'id', align: 'center',hide: true},
		            {display: '所属部门', name : 'deptname', width : 150, sortable : false, align: 'center'},  
		            {display: '创建人姓名', name : 'creatorname', width : 130, sortable : false, align: 'center'},  
		            {display: '创建日期', name : 'createtime', width : 120, sortable : false, align: 'center'},  
		            {display: '所属月份', name : 'month', width : 60, sortable : false, align: 'center'},  
		            {display: '状态', name : 'status',width : 90, align: 'center',process:Plan.formatStatus},
		            {display: '审批信息', name : 'approve',width : 140, align: 'center'},
		            {display: '操作', name : 'id', width : 230, sortable : false, align: 'center',process: Plan.operRender}
		            ],
		        buttons : [
		            {name: '新建', bclass: 'generate', onpress : Plan.create},
		            {separator: true},
		            {name: '删除', bclass: 'delete', onpress : Plan.deleteAll},
		            {separator: true},
		            {name: '发布', bclass: 'next', onpress : Plan.publish},
		            {separator: true}
		            ],
		        errormsg: '发生异常',
		        idProperty : "id",
		        sortorder: "desc",  
		        usepager: true,  
		        title: false,  
		        pagestat: '显示记录从{from}到{to},总数 {total} 条',  
		        useRp: true,  
		        rp: 10,  
		        title:'部门月工作计划管理',
		        rpOptions: [10, 15, 20, 30, 40, 100], 
		        nomsg: '没有符合条件的记录存在',  
		        minColToggle: 1, 
		        showTableToggleBtn: true,
		        autoload: true, 
		        resizable: false, 
		        procmsg: '加载中, 请稍等 ...',  
		        hideOnSubmit: true, 
		        blockOpacity: 0.5,
		        striped: true,
		        rowbinddata: true,
		        singleSelect: false,
		        showCheckbox:true,
		        showToggleBtn: false
		    });
	
	</script>

以上是一个flexigrid的列表,在状态这一列中绑定了一个事件,Plan.formatStatus;此事件用来格式化数据使用,要想格式化首先要获取到该行的值,可以通过(dom).text();来得到该列的值 然后通过(dom).text("xxxx");来给该列赋值

代码语言:javascript复制
Plan.formatStatus =function(dom,status){
		var status=$(dom).text();
		if(status==0){
			$(dom).html("暂存");
		}else if(status==1){
			$(dom).html("待审");
		}else if(status==2){
			$(dom).html("<font color=red>审核不通过</font>");
		}else if(status==3){
			$(dom).html("<font color=green>审核通过</font>");
		}else if(status==6){
			$(dom).html("已发布");
		}
	}

如果我要在某一列中获取本行其他列的值该如何做呢?

首先还是要通过process方法给这一行的某一列绑定一个事件,然后通过触发这一个事件来获取这一行的值,比如我给操作列绑定了一个叫做Plan.operRender的事件,然后这个事件通过格式化返回一个超链接给这一列

$(dom).html("<a href='#' οnclick="Plan.add('" id "')">添加</a>");

此时的操作列已经有绑定的事件了,当我点击操作列中的 Plan.add事件来触发如下方法:

代码语言:javascript复制
Plan.add=function(id){
		var status = "";
		var grid = $("#ListGrid").flexigrid();
		$('tbody tr td:nth-child(1) div', grid).each(function(i) {  
	      	 if($(this).text() == id){
	      		 status = $(this).parent().next().next().next().next().next().text();//注意
	      	 }
	    });  
		if(status == '暂存')
			kk = "xxxxx.action?Plan.id=" id;
	}

此方法将获取触发操作列所在行的第6列的值,也就是使用了5个next()的原因。

Mark一下,方便查找。

0 人点赞