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

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

作者头像
西门呀在吹雪
发布于 2020-11-09 02:22:00
发布于 2020-11-09 02:22:00
81700
代码可运行
举报
文章被收录于专栏:架构之巅架构之巅
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(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
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
BootstrapTable (前后端分页,表格 ajax 返回数据回调处理) 配置参数全说明
bootstrap table使用总结 前端分页使用实例: var App = { renderSummaryData: (res) => { var hitchDOM = "
一个会写诗的程序员
2018/08/17
6.8K0
BootstrapTable (前后端分页,表格 ajax 返回数据回调处理) 配置参数全说明
质量看板开发实践(六):添加一个列表,显示当前冲刺的故事标题
在这个基础上,希望能够看到这个冲刺中每个故事卡的标题内容,可以以弹窗列表的形式展示,如下
冰霜
2022/05/01
5431
vue快速入门的三个小实例
用vue做项目也有一段时间了,之前也是写过关于vue和webpack构建项目的相关文章,大家有兴趣可以去看下webpack+vue项目实战(一,搭建运行环境和相关配置)(这个系列一共有5篇文章,这是第一篇,其它几篇文章链接就不贴了)。但是关于vue入门基础的文章,我还没有写过,那么今天就写vue入门的三个小实例,这三个小实例是我刚接触vue的时候的练手作品,难度从很简单到简单,都是入门级的。希望能帮到大家更好的学习和了解vue,也是让自己能够复习一下vue。如果发现文章写得有什么不好,写错了,或者有什么建议!欢迎大家指点迷津!
守候i
2018/08/22
1.4K0
vue快速入门的三个小实例
WEB入门之十四 jQuery事件
JavaScript是事件驱动型的编程语言,即JavaScript和HTML之间的交互是通过用户和浏览器操作页面时触发的事件来驱动进行的。使用传统的JavaScript就能处理这些交互,但是jQuery增加并扩展了JavaScript事件处理机制,使其使用起来更加优雅和灵活。本章我们重点讲解jQuery中的各种事件以及事件的绑定。
用户9184480
2024/12/17
1680
WEB入门之十四   jQuery事件
使用jquery-easyui写的CRUD插件(2)
首先定义变量 var options = jQuery.extend({},jQuery.fn.crudUIGrid.defaults, options); var addTypeName = options.addTypeName;//添加div的页面的名称,默认是type-window var formId = options.formId;//要操作的form的名称 var title = options.title;
cloudskyme
2018/03/19
1.7K0
JQuery 入门 - 附案例代码
HTML入门与进阶以及HTML5 CSS JS-上 JS-下 jQuery Node.js + Gulp 知识点汇总 MongoDB + Express 入门及案例代码 Vue项目开发-仿蘑菇街电商APP
Twcat_tree
2023/02/20
13.9K0
JQuery 入门 - 附案例代码
前端学习(46)~事件简介
事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
Vincent-yuan
2020/03/19
7820
JQuery 表格插件介绍:Flexigrid 和 DataTables
JQuery 的表格插件有很多。Flexigrid 和 DataTables 是我最近使用的,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格的插件,可以考虑它们。
四火
2022/07/15
2.6K0
JQuery 表格插件介绍:Flexigrid 和 DataTables
ASP.NET MVC5+EF6+EasyUI 后台管理系统(22)-权限管理系统-模块导航制作
最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了。 由于我们已经跑通了整个系统,所有东西都回到了简单,接下来我们做模块制作也就是操作SysModule表。 首先我们来回顾一下之前的难点主要就是SysRight这个表Rightflag字段的改变,这个字段关系导航与角色组的关系显示(即有权限时候显示菜单导航,这个更新讲到授权讲到,在这里浮头一下) 所以我们操作SysModule必须更新SysRight这张表,把模块先分配给角色 所以思路已经比较明显和简单了,这里我们模块将用treegrid来做,同时也
用户1149182
2018/01/16
5.2K0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(22)-权限管理系统-模块导航制作
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(二)
HML(HarmonyOS Markup Language)是一套类HTML的标记语言,通过组件,事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。
枫叶丹
2025/01/27
540
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(二)
老司机读书笔记——Weex学习笔记
Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。
老司机Wicky
2018/08/22
1.6K0
老司机读书笔记——Weex学习笔记
自制在线富文本编辑器,精简完整版
 不需要插入图片功能的去掉php代码然后将.php文件改为.html即可变成本地文本编辑器,是不是很酷!当然功能跟world比没那么强大!
超级小可爱
2023/02/17
1.9K0
自制在线富文本编辑器,精简完整版
【前端系列-4】layui表格集成select选择框和switch开关
在前文中,我们已经初步感受了layui表格使用自定义模板的基础操作。现在,在自定义模块应用的基础上,我们进一步丰富layui表格对其他组件的集成。
云深i不知处
2020/09/16
4.2K0
Arcgis for Javascript之featureLayer图和属性的互操作
说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果:
牛老师讲GIS
2018/10/23
3.3K0
Arcgis for Javascript之featureLayer图和属性的互操作
Salesforce 如何实现Listview表示项目的画面迁移
image.png 如下当点击Link名称时,如何实现迁移到详细画面 image.png 1.首先在Apex中添加画面迁移用的项目【idLink】 MC_ContactListViewController.cls public with sharing class MC_ContactListViewController { @AuraEnabled(cacheable=true) public static List<ContactWrapper> getContactListView(B
repick
2022/05/03
5920
Salesforce 如何实现Listview表示项目的画面迁移
【VUE】基础用法(属性与事件的绑定,条件渲染等)
在填写表单时,双向数据绑定可以辅助开发者在不操作DOM的前提下,自动把用户填写的内容同步到数据源中。
坚毅的小解同志的前端社区
2022/12/13
1.5K0
【VUE】基础用法(属性与事件的绑定,条件渲染等)
Salesforce lightning datatable inline editing using Lwc
自定义的ListView中项目需要直接编辑的情况下,【lightning-datatable】组件也提供相应方法
repick
2022/05/05
5150
Salesforce lightning datatable inline editing using Lwc
bootstrap-table 前端分页,刷新事件代码实例
参考文档: http://bootstrap-table.wenzhixin.net.cn/
一个会写诗的程序员
2018/09/12
2.7K0
springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码)
springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码) 上一篇介绍了spring boot整合mybatis实现了后端的CRUD的查询部分,本文主要是完善修改、删除和添
Java帮帮
2018/03/15
1.5K0
springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码)
useDrop vue 拖拽hook
使用例子 <style> *{ margin: 0; padding: 0; } li{ list-style: none; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; m
copy_left
2020/04/30
6040
推荐阅读
相关推荐
BootstrapTable (前后端分页,表格 ajax 返回数据回调处理) 配置参数全说明
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文