前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >flexigrid 绑定事件process以及对行列的操作

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

作者头像
西门呀在吹雪
发布2020-11-09 10:22:00
8000
发布2020-11-09 10:22:00
举报
文章被收录于专栏:架构之巅
代码语言: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一下,方便查找。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014/07/12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档