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

相关推荐
@PHARAOH2 分钟前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了3 分钟前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER4 分钟前
Web 开发 30
前端·笔记·后端·学习·web
学编程的小虎4 分钟前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
Jonathan Star8 分钟前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端23 分钟前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏27 分钟前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq28 分钟前
前端box-shadow出现兼容性问题如何处理
前端
携欢36 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河43 分钟前
工作中的Ai工具汇总
前端