easyUI的datagrid每行数据添加操作按钮的方法

今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下:

其实要加一行自定义列很简单,在js声明datagrid的时候加上如下代码

[javascript] view plain copy

  1. {field:‘operate‘,title:‘操作‘,align:‘center‘,width:$(this).width()*0.1,
  2. formatter:function(value, row, index){
  3. var str = ‘<a href="#" name="opera" class="easyui-linkbutton" ></a>‘;
  4. return str;
  5. }}

这行代码是在columns属性下定义的,而且一定要加上这个代码

[javascript] view plain copy

  1. onLoadSuccess:function(data){
  2. $("a[name=‘opera‘]").linkbutton({text:‘下订单‘,plain:true,iconCls:‘icon-add‘});
  3. },

如果不加这个,那个操作列就不会出现按钮的样式,只是一个超链接,用linkbutton或者其他按钮的可以根据需求改编

最后效果如下

之后可以对a标签做onclick事件之类的,视情况而定

原文地址:https://www.cnblogs.com/yy1234/p/8708451.html

时间: 2024-10-12 20:54:40

easyUI的datagrid每行数据添加操作按钮的方法的相关文章

给Jquery easyui 的datagrid 每行增加操作链接

我们都知道Jquery的Easy-UI的datagrid可以添加并且自定义Toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作.但实际项目里我们可能需要在每行后面加一些操作链接,最常见的就是比如"修改"."删除"."查看"之类.如下图: 凡事都怕但是!Easy-UI的Datagrid没有直接添加link的属性.查看Easy-UI的帮助文档,看到一个formater:格式化函数,可以对某一行进行格式化,然后通过

JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)

需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,2000-12-09 :12:34:56 Jquery Easyui DataGrid中列设置 { field: 'Name', title: '名称', width: 120 ,align:left},{field: 'Age', title: '年龄', width: 120 ,align:right

(原创)EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件

有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = $('#staffLogDetailGrid').datagrid('getEditors', index);     //获得当前行的编辑对象 console.info(editors[5]);  //editor[5]表示第五列这个控件 var sfgzEditor = editors[5];

EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件

有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = $('#staffLogDetailGrid').datagrid('getEditors', index); console.info(editors[5]); var sfgzEditor = editors[5]; sfgzEditor.target.bind('change',functio

EasyUI之dataGrid的行内编辑

1 $(function () { 2 var datagrid; //定义全局变量datagrid 3 var editRow = undefined; //定义全局变量:当前编辑的行 4 datagrid = TskupluAddPacket.datagrid({ 5 url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源 6 iconCls: 'icon-save', //图标 7 pagination: true, //显

运用EasyUI中datagrid读取数据库数据实现分页

1dao层 package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate.Query; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction; import org.hibernate.boot.registry.Standa

datagrid动态数据添加超链接的方法

首先,我我们要有一个json格式的datagrid_data.json文件,如下: 其次,在body下有个数据表格,引入json <table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">     <thead&g

无cmd命令行下添加用户的方法:API添加用户与Shell.Users

之前有个html" target=_blank>xp下利用控制面板的cpl文件留后门,然后又有了用.cpl文件加账号的技术,lcx真的很厉害 今天研究了一下用户控制面板文件nusrmgr.cpl,发现调用的是Shell.Users来加用户,它还同时调用了wscript.shell.Shell.Application.Shell.LocalMachine这三个组件.不过加用户的话,这一个Shell.Users就足够了.那么可能在删掉了net.exe和不用adsi之外,这也可能是一种新的加用户

6月16 ThinkPHP连接数据库及Model数据模型层--------查询及数据添加

连接数据库配置及Model数据模型层 convertion.php config.php 1.在config.php做数据库连接配置 2.修改配置 /* 数据库设置 */ 'DB_TYPE' => 'mysql', // 数据库类型 'DB_HOST' => 'localhost', // 服务器地址 'DB_NAME' => 'mydb', // 数据库名 'DB_USER' => 'root', // 用户名 'DB_PWD' => '', // 密码 'DB_PORT'