Easyui Datagrid实现行操作

Easyui Datagrid实现行操作

效果

分析

实现此功能需要实现2点

1、首列的内容全部需要渲染成 申请开票

2、点击申请开票可以获获取到指定的行内容,在执行后续操作

实现方案

1、首行格式化,在table的th属性中加入formatter

示例代码如下

javascript 复制代码
<th data-options="field:'orderId',width:120" formatter="formatOperate" >操作</th>

2、在JavaScript中编写代码formatOperate

javascript 复制代码
function formatOperate(val,row){
	return '<a href="#"><font color="blue" style="text-decoration:underline">申请开票</font></a>';
}

当然也可以子啊 a标签中使用 onclick 来执行需要的功能,例如

javascript 复制代码
function formatOperate(val,row){
	return '<a href="#" οnclick="doSome('+row.id+')"><font color="blue" style="text-decoration:underline">申请开票</font></a>';
}

注意:这个面doSome(id) 中的参数id 不能是对象,例如不能直接写 doSome(row)

3、如果我们想获取行数据,并且点击了指定的单元格有效,可以在table上使用 onClickCell 单元格点击事件

onClickCell(index, field, value) 在用户点击一个单元格的时候触发。

此时我们可以在table上加上onClickCell然后判断 field 是不是我们点击的filed,如果是在执行后续操作

table在data-option中新增onClickCell

javascript 复制代码
<table style="width:100%;height:100%;" id="dg"
                   data-options="
                   singleSelect:false,
                   fit:true,
                   rownumbers:true,
                   striped:true,
                   autoRowHeight:false,
                   checkOnSelect:true,
                   selectOnCheck:true,
                   pagination:true,
                   pageSize:10,
                   pageList:[50,100,200,500,1000],
                   checkOnSelect:false,
                   sortName : 'lastmodifytime',
                   sortOrder : 'desc',
                   toolbar: '#tb',
                   onClickCell:onClickCell
	        ">

4、在javasrcipt中编写onClickCell方法,此名称可以任意命名 onClickCell:onClickCell 名称需要和后面的这个保持一致;

javascript 复制代码
function onClickCell(index, field, value){
    console.log('index',index)
    console.log('field',field)
    console.log('value',value)
    // 指定列点击时触发
    if (field === 'orderId') {
        let rowData = $(this).datagrid('getData').rows[index];
        // TODO 做你先想做的逻辑
    }
}

以上就完成了Datagrid实现行操作功能,如果你不需要获取整行数据,那么只需要前两步就可以满足,如果需要并且点击的行值唯一,也可以通过唯一属性值查找Datagrid的数据行!

相关推荐
万邦科技Lafite1 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
Never_Satisfied3 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
一只小透明啊啊啊啊4 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友4 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao5 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子5 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...5 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪5 小时前
函数组件和异步组件
前端·javascript·面试
淮北4946 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友6 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式