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

相关推荐
qq_124987075325 分钟前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
袁煦丞1 小时前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_011 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭1 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育2 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo2 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
yinuo2 小时前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
木心操作3 小时前
js生成excel表格进阶版
开发语言·javascript·ecmascript
GISer_Jing3 小时前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登3 小时前
【Webpack】模块联邦
前端·webpack·node.js