Easyui 自定义列 添加按钮 样式问题

  开始想在easyui的datgrid中添加一列操作列,这一列的内容全部是按钮,方便显示详细信息。

  添加完成之后,发现按钮的样式有问题,即使我把a标签的class属性和plain属性设置成和页面上一样,结果还是没有起作用。

开始的部分代码:

       onLoadSuccess:function(data){
            },
            idField:‘userId‘,
            columns:[[
                {field:‘ck‘,width:5,checkbox:true},
                {field:‘userId‘,title:‘用户id‘,width:50,hidden:true},
                {field:‘userName‘,title:‘用户名‘,width:50,align:‘center‘},
                {field:‘phoneNum‘,title:‘联系方式‘,width:50,align:‘center‘},
                {field:‘roleGroupName‘,title:‘角色‘,width:50,align:‘center‘},
                {field:‘areaCodesName‘,title:‘管理区域‘,width:50,align:‘center‘},
                {field:‘operation‘,title:‘操作‘,width:50,align:‘center‘,formatter:formatFunc}
            ]]    

function formatFunc(val,rowData,index){
    var str = JSON.stringify(rowData);
    return "<a  id=‘detailInfoBtn‘ class=‘easyui-linkbutton‘ plain=‘true‘ onclick=‘getDetail("+str+")‘>详细信息</a>";
}

  后面改成了在OnLoadSucess的回调中,动态添加样式,解决了这个问题。

       onLoadSuccess:function(data){
                $(‘.detailInfoBtn‘).linkbutton({text:‘详细信息‘,plain:true,iconCls:‘icon-edit‘});
            },
            idField:‘userId‘,
            columns:[[
                {field:‘ck‘,width:5,checkbox:true},
                {field:‘userId‘,title:‘用户id‘,width:50,hidden:true},
                {field:‘userName‘,title:‘用户名‘,width:50,align:‘center‘},
                {field:‘phoneNum‘,title:‘联系方式‘,width:50,align:‘center‘},
                {field:‘roleGroupName‘,title:‘角色‘,width:50,align:‘center‘},
                {field:‘areaCodesName‘,title:‘管理区域‘,width:50,align:‘center‘},
                {field:‘operation‘,title:‘操作‘,width:50,align:‘center‘,formatter:function(val,rowData,index){
                    var str = JSON.stringify(rowData);
                    var btn = "<a class=‘detailInfoBtn‘ onclick=‘getDetail("+str+")‘>详细信息</a>";
                    return btn;
                }}
            ]]    

原文地址:https://www.cnblogs.com/GoneLW/p/8398683.html

时间: 2024-08-11 19:40:56

Easyui 自定义列 添加按钮 样式问题的相关文章

自定义新浪微博分享按钮样式

自定义新浪微博分享按钮样式 新浪开放平台虽然有分享按钮的组件(http://open.weibo.com/sharebutton)并且提供了两种格式的应用方法:WBML和JS,但还是无法据自己的需求做到自定义样式. 为了解决该问题,我们首先来看下新浪所生成的JS代码: <script type="text/javascript" charset="utf-8"> (function(){ var _w = 32 , _h = 32; var param

js中给easyui的一列添加按钮

$("#totalTb").datagrid({ columns: [[                { field: 'ENTITY_ACTNAME', title: '活动名称', width: 120, align: "left", halign: 'center' },                { field: 'ACT_RATE', title: '答题中奖率', width: 80, align: "right", halig

WPF自定义漂亮的按钮样式

首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮: 然后给各个按钮设置不同的背景颜色: 设置好之后就是这样啦: 然后我们就开始在 App.xaml 文件中定义按钮样式了: 定义的样式代码如下: 以下为引用的内容: <Application x:Class="WPFButton.App"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen

自定义上传按钮样式

效果体验:http://runjs.cn/detail/crltmoya <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #fileInput1 { cursor:pointer; opacity:0; } div{ width:300px; height:200px; backgroun

[WPF自定义控件库]为Form和自定义Window添加FunctionBar

1. 前言 我常常看到同一个应用程序中的表单的按钮----也就是"确定"."取消"那两个按钮----实现得千奇百怪,其实只要使用统一的Style起码就可以统一按钮的大小,而我喜欢更进一步将"确定"."取消"或其它按钮封装进一个自定义控件里. 这篇文章介绍了另一种ItemsControl的实现方式,并使用它为表单及自定义Window添加常用的按钮及其它功能. 2. 为Form添加FunctionBar 本来打算派生自ToolBa

按钮样式加载等待

使用插件Ladda,基于bootstrap的样式实现加载等待的效果: 首先引用.css以及.js文件: <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="dist/ladda-themeless.min.css"> <script src="dist/spin.min.js&

QTableView 一列添加两个按钮

在QTableView的一列里添加两个按钮,之前添加一个按钮的思路是一样的,只是计算了一下按钮的宽,放两个按钮而已. 添加一个按钮的例子:QTableView 添加按钮 本例源代码:QtTowButtons.rar 看一下列的效果 看一下添加两个按钮的效果点击第一个按钮弹出 but1 +当前列 点击第二个按钮弹出but2 + 当前行 下面是主要实现 继承自 QItemDelegate 主要是实现 了它的painter方法,把两个自定义的按钮绘制到视图并保存 还有editorEvent事件,用来处

easyui datagrid 自定义加载按钮实例

今天写一个项目,在用到datagrid的时候突然发现加载操作列中的自定义按钮出来问题,经过一番研究,原来这么简单.话不多说,上图 //获取选中行审核 function Checker(indexDiv) { $('#grid').datagrid('selectRow',indexDiv);//获取选中行 var rows = $('#grid').datagrid('getSelected');//获取选中行数据 ShowDiv(); //调用事件 $('#UserTd').html(rows

iOS实现row行column列个按钮的添加

注释要添加的按钮的总个数为total -(void)addScrollAndButton{ int  COLUMN=4;//列数 int total = self.listArray.count; //int rows = (total / COLUMN) + ((total % COLUMN) > 0 ? 1 : 0); int btnwidth=50; int btnheight=30; int widthblank=20; int heightblank=20; for (int i=0;