easyui datagrid 每条数据后添加操作按钮

easyui datagrid 每条数据后添加“编辑、查看、删除”按钮

1、给datagrid添加操作字段:字段值

<table class="easyui-datagrid" data-options="singleSelect:true,collapsible:true,url:‘publish.json‘,method:‘get‘,fit:true"
                style="width: 700px; height: 250px">
                <thead>
                    <tr>
                        <th data-options="field:‘itemid‘,width:‘10%‘,align:‘center‘">序号</th>
                        <th data-options="field:‘productid‘,width:‘15%‘,align:‘center‘">标题</th>
                        <th data-options="field:‘listprice‘,width:‘15%‘,align:‘center‘">信息类型</th>
                        <th data-options="field:‘unitcost‘,width:‘15%‘,align:‘center‘">附件情况</th>
                        <th data-options="field:‘attr1‘,width:‘15%‘,align:‘center‘">发布时间</th>
                        <th data-options="field:‘status‘,width:‘15%‘,align:‘center‘">发布状态</th>
                        <th data-options="field:‘operate‘,width:‘15%‘,align:‘center‘,formatter:operate_formatter">操作</th>
                    </tr>
                </thead>
            </table>

2、javascript实现:

     <script type="text/javascript">
         function operate_formatter(value, row, index) {
             return "<a href=‘#‘ class=‘easyui-linkbutton‘>编辑</a>/\
             <a href=‘#‘ class=‘easyui-linkbutton‘>查看</a>/             <a href=‘#‘ class=‘easyui-linkbutton‘>删除</a>";
         }
    </script>

时间: 2025-01-14 05:02:35

easyui datagrid 每条数据后添加操作按钮的相关文章

在easyui datagrid中formatter数据后使用linkbutton

http://ntzrj513.blog.163.com/blog/static/2794561220139245411997/ formatter:function(value,rowData,rowIndex){ if(value==""||value==null){ return "未知"; return rowData.cname+"<a class='easyui-linkbutton' data-options=\"iconCl

处理分页 当前页&gt;1时, 操作的最后一页的最后一条数据后,向前提前一页

* handleAgentJobs({ payload }, { call, put }) { const data = yield call(handleAgentJob, payload) if (data && data.code === 200) { yield put({ type: 'handleAgentAbandonPage', payload }); } else { message.error(data && data.message || '请求失败'

实现easyui datagrid在没有数据时显示相关提示内容

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

EasyUI datagrid 格式化显示数据

http://blog.163.com/[email protected]/blog/static/103242241201512502532379/ 设置formatter属性,是一个函数,格式化函数有3个参数: The cell formatter function, take three parameters:value: the field value.rowData: the row record data.rowIndex: the row index. 一.格式化显示性别 后台传过

easyui datagrid加载数据和分页

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String basepath = request.getContextPath();%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core&quo

【原创】有关Silverlight控件DataGrid的绑定数据后单元格单独复制的功能实现分析

前些日子,公司新需求需要对silverlight的datagrid进行局部任意单元格数据可复制,查阅了半天网络资料愣是没找到相关资料,开始还以为是silverlight的bug根部无法实现, 最后还是实现了.MSDN上也未曾记录这个事件,具体代码如下: 前段xaml文件 需要个datagrid绑定复制事件: CopyingRowClipboardContent="dataGrid_CopyingRowClipboardContent" 后台代码实现如下: void dataGrid_C

easyui datagrid加载数据的两种方式

1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id:"2",name:"二"}]}; $('#dg').datagrid('loadData',obj); 注意:这里的数据必须是json对象,要是json字符串,必须先转换成json对象才能作为datagrid的数据源.否则会出现异常:Cannot read proper

easyui datagrid设置fit: true后,页面显示不全的情况

跟工具栏有关 <div id="tb"> <div style="float:left;"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="javascript: addServer();">新建</a>

谈谈easyui datagrid 的数据加载(转)

这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程中容易产生的误区做较为详细的描述,希望能对大家有所帮助. url方式加载数据 调用方式 目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将