EasyUI的DataGrid每行数据添加操作按钮的实现代码

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

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

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

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

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

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

最后效果如下

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

总结

以上所述是小编给大家介绍的EasyUI的DataGrid每行数据添加操作按钮的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

    jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

    1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <% String path = request.getContextPath(); S

  • jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

    jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

    有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉. 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添加的效果. 现在我们来看看原的编辑:来自Easyui 1.5.1的Demo <demo/datagrid/rowediting.html> 接下来,我们主要是要高度自由的编辑实现: 1.可以同时追加多行 2.追加的行可以是任何位置 3.可以随时进行编辑任意位置的行 4.保存再统一验证 实现 在原有的r

  • datagrid行内按钮(更新/删除等)操作实现代码

    ui: 复制代码 代码如下: <asp:TemplateField HeaderText="Operation" ShowHeader="False"> <ItemStyle Width="100px" /> <ItemTemplate> <table width="100%"> <tr> <td align="center" valign=

  • jQuery EasyUI编辑DataGrid用combobox实现多级联动

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    我在项目中设计课程表的时候需要用到老师和分类之间的多级联动. 首先是一张效果图: 下面是实现的代码: <body> <script type="text/javascript"> $(function(){ var editing ; //判断用户是否处于编辑状态 var flag ; //判断新增和修改方法 $('#set_schedule').datagrid({ idField:'id' , fitColumns: false , url:'schedul

  • jQuery Easyui datagrid连续发送两次请求问题

    XXXXXX.datagrid({ url: "${pageContext.request.contextPath}/xx/xx/xx, }); 用上述方式动态加载datagrid的数据时,通过net监听,发现调用了两遍XX方法,目前的解决方案是,将url放到datagrid初始化的时候执行. $('#XXXX').datagrid({ fit: true, fitColumns: false, border: false, pagination: false, idField: 'id', s

  • Easyui Datagrid自定义按钮列(最后面的操作列)

    Easyui Datagrid自定义按钮列(最后面的操作列)

    做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式,js方式暂时还没用到 首先是HTML部分 <table id="dg" title="学生信息" class="easyui-datagrid" url="${ctx}listStudent.do" toolbar=&qu

  • easyui datagrid 表格中操作栏 按钮图标不显示的解决方法

    jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染 解决办法: 使用解析器 Parser(解析器) $.parser.parse(); // 解析所有页面 $.parser.parse('#cc'); // 解析指定节点 以上这篇easyui datagrid 表格中操作栏 按钮图标不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

  • EasyUI的DataGrid每行数据添加操作按钮的实现代码

    EasyUI的DataGrid每行数据添加操作按钮的实现代码

    今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下: 其实要加一行自定义列很简单,在js声明datagrid的时候加上如下代码 {field:'operate',title:'操作',align:'center',width:$(this).width()*0.1, formatter:function(value, row, index){ var str =

  • jQuery实现表格行数据滚动效果

    jQuery实现表格行数据滚动效果

    本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码,供大家参考,具体内容如下 HTML代码: <div class="box"> <div class="box-header"> <div class="col">测试1</div> <div class="col">测试2</div> <div class="col"

  • EasyUI中的dataGrid的行内编辑

    这个js代码是别人写的,可能不是最好的,但我个人觉得首先能帮助别人解决功能问题的话就特别好.我稍加修改后用在了自己的项目上了,这里贴出来分享一下.后台用的TinkPHP因为都是查增删改比较简单,这里就不贴了.前台效果图因为比较懒,也不贴了. $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = TskupluAddPacket.datagrid({ ur

  • jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

  • Easyui笔记2：实现datagrid多行删除的示例代码

    Easyui笔记2：实现datagrid多行删除的示例代码

    如何实现datagrid多行删除? 最近在前端界面开发中,使用了datagrid组件.需要完成一个多行勾选并删除的功能. 查看easyui api,其中有一个deleteRow方法,传入要删除行的索引,即可删除该行. 错误做法 于是准备用deleteRow方法和onChecked和onUncheck事件配合使用,来完成多行删除功能. 当用户勾选一行时,触发onChecked事件,将onChecked事件传进来的index索引push到一个全局array中. 当用户取消勾选的时候,触发onUnch

  • C#实现给DataGrid单元行添加双击事件的方法

    本文实例讲述了C#实现给DataGrid单元行添加双击事件的方法.分享给大家供大家参考.具体如下: 现在我需要做到的功能是当我单击DataGrid某行时显示相对应选中的数据信息,在双击此相同行时弹出删除对话框,应该怎么做呢.由于单击问题很简单就不再阐述了,下面我说一下双击事件是怎么实现的. 这里用到了DataGrid的ItemDataBound事件,我们可以把下面的代码加入到所需的程序中就可实现双击的功能. private void DataGrid1_ItemDataBound( object

  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    给Table组件添加Click事件,实现点击某行数据操作 customRow 设置行属性 Function(record, index) 通过customRow 属性给table添加自定义事件 <a-table :columns="columns" :dataSource="data" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,onSelec

  • 详解jquery easyui之datagrid使用参考

    详解jquery easyui之datagrid使用参考

    本文介绍了jquery easyui之datagrid使用,具体如下: 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上的div标签: <div id="magazineGrid"> </div> js代码: $('#magazineGrid').datagrid({ height: 340, url: 'url', method: 'POST', queryParam

  • SSh结合Easyui实现Datagrid的分页显示

    SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面一一写来. 首先看一下要实现的效果:当每页显示5行数据: 当每页显示10行数据,效果如下: 具体步骤: 1.下载Easyui,并搭建环境. 2.搭建SSH工程,整个工程的目录结构如图所示: 3.在Oracle数据库中创建表Student.并且输入下面6行数据,因为添加操作还没有实现,所以先在数据库表中添加数据.默认

随机推荐