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的数据行!

相关推荐
lecepin1 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒1 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿1 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥2 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸2 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin2 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊2 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术2 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js