http://blog.csdn.net/sskicgah/article/details/16939959

以前,用easyui的datagrid,有时候会用到一些操作选项,比如代码如下:

  1. $('#datagrid').datagrid({
  2. border:false,
  3. fitColumns:true,
  4. singleSelect: true,
  5. url:url,
  6. columns:[[
  7. {field:'projectname',title:'应用名',width:80},
  8. {field:'projectpackage',title:'应用包名',width:25}
  9. {field:'opt',title:'操作',width:50,align:'center',
  10. formatter:function(value,rec){
  11. var btn = "<a class='editcls' onclick='editRow('"+rec.projectname+"','"+rec.projectpackage+"')' href='javascript:void(0)>'编辑</a>";
  12. return btn;
  13. }
  14. }
  15. ]]
  16. });

这个代码的效果就是最后一列显示一个链接,点击链接触发编辑事件,把两个参数传进去编辑。

后来,发现了问题,就是,当变量中含有空格时,html的解析会导致该事件失败,浏览器会自动补全双引号,空格导致了页面中""部分把双引号解析错误了。之后,一个同事说他写这种代码,一般按照正常的html规则来写,就不会出错了,也就是,html页面中出现双引号的部分就用双引号,于是,我写js引号的风格也就改成了用单引号来当做字符串的引号。修改后代码如下:

  1. $('#datagrid').datagrid({
  2. border:false,
  3. fitColumns:true,
  4. singleSelect: true,
  5. url:url,
  6. columns:[[
  7. {field:'projectname',title:'应用名',width:80},
  8. {field:'projectpackage',title:'应用包名',width:25}
  9. {field:'opt',title:'操作',width:50,align:'center',
  10. formatter:function(value,rec){
  11. var btn = '<a class="editcls" onclick="editRow(\''+rec.projectname+'\',\''+rec.projectpackage+'\')" href="javascript:void(0)">编辑</a>';
  12. return btn;
  13. }
  14. }
  15. ]]
  16. });

再之后,觉得把链接改成用easyui的按钮会好一些,就找了各种办法,最后发现,只要把按钮部分的html代码用js初始化就可以得到按钮了,代码如下:

  1. $('#datagrid').datagrid({
  2. border:false,
  3. fitColumns:true,
  4. singleSelect: true,
  5. url:url,
  6. columns:[[
  7. {field:'projectname',title:'应用名',width:80},
  8. {field:'projectpackage',title:'应用包名',width:25}
  9. {field:'opt',title:'操作',width:50,align:'center',
  10. formatter:function(value,rec){
  11. var btn = '<a class="editcls" onclick="editRow(\''+rec.projectname+'\',\''+rec.projectpackage+'\')" href="javascript:void(0)">编辑</a>';
  12. return btn;
  13. }
  14. }
  15. ]],
  16. onLoadSuccess:function(data){
  17. $('.editcls').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});
  18. }
  19. });

主要就是在onLoadSuccess做的初始化工作,就可以显示出按钮的效果了。

easyui datagrid列使用按钮的一些心得(转)的更多相关文章

  1. easyui datagrid列使用按钮的一些心得 .

    以前,用easyui的datagrid,有时候会用到一些操作选项,比如代码如下: $('#datagrid').datagrid({ border:false, fitColumns:true, si ...

  2. easyui datagrid 列隐藏和显示

    easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏?   最佳答案   $('#grid').datagrid('hideColumn','列field');把hideColu ...

  3. js控制easyui datagrid列的显示和隐藏

    easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列

  4. easyui datagrid 列拖拽

    首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...

  5. 让jquery easyui datagrid列支持绑定嵌套对象

    嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...

  6. easyui datagrid 列的内容超出所定义的列宽时,自动换行

    定义表单  nowrap="false"可以使得列中的内容超出所定义的列宽是就会自动换行pagination : true, // 当true时在DataGrid底部显示一个分页工 ...

  7. easyUI datagrid 列宽自适应(简单 图解)(转)

    响应数据格式: easyUI在html代码中结构: 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了; 以下就是自适应代码: //添加事件 function c ...

  8. easyui datagrid 列显示和隐藏

    //当查询IT基础设施的时候隐藏'STAFF_ID'.'ITSM_STAFF_ID' if($("input[name='currentstate']").val()==2){ $ ...

  9. easyui datagrid列中使用tooltip

    要实现这样一个效果:数据加载到DATAGRID中,鼠标移至某一列时,会弹出tooltip提示框. 最初的实现方法: { field: 'Reply', title: '备注', width: 220, ...

随机推荐

  1. POJ 2312:Battle City(BFS)

    Battle City Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9885   Accepted: 3285 Descr ...

  2. HPU 1471:又是斐波那契数列??(大数取模)

    1471: 又是斐波那契数列?? 时间限制: 1 Sec 内存限制: 128 MB 提交: 278 解决: 27 统计 题目描述 大家都知道斐波那契数列吧?斐波那契数列的定义是这样的: f0 = 0; ...

  3. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 no-loop

    转载至:https://blog.csdn.net/wo541075754/article/details/75201934 no-loop 定义当前的规则是否不允许多次循环执行,默认是 false, ...

  4. 实习第一天:try和catch的使用

    package wo;public class wowo{ public static void main(String[] args){ try{ // int i = 1/0; 是没有语法错误的, ...

  5. 比jsonpath 更方便的json 数据查询JMESPath 使用

      类似xml 的xpath json 有jsonpath 都是为了方便进行数据查询,但是jsonpath 的功能 并不是很强大,如果为了方便查询可以使用jmespath. 以下为简单使用: 查询格式 ...

  6. smarty学习——高级知识

    1.Objects 对象 smarty允许通过模板访问PHP对象.有两种方式来访问它们.一种是注册对象到模板,然后通过类似于用户自定义函数的形式来访问它. 另一种方法给模板分配对象,然后通过访问其它赋 ...

  7. revit API 生成墙图元

    由于Revit的版本问题,在网上找的生成墙图元的代码,在我机器上的Revit 2016中编译不能通过,通过多次调试,终于找到在revit 2016中使用API生成墙图元的代码,现在贴出来. 下面的代码 ...

  8. Oracle 11gR2 RAC 常用维护操作 说明

    一.启动和停止集群 在Oracle 11gR2 下的RAC,架构发生了变化.CRS的信息也是放在ASM 实例里的,所以要关asm,必须关闭crs, 如果还使用了acfs的话,一关crs那么acfs里的 ...

  9. Spring Cloud 入门 之 Config 篇(六)

    原文地址:Spring Cloud 入门 之 Config 篇(六) 博客地址:http://www.extlight.com 一.前言 随着业务的扩展,为了方便开发和维护项目,我们通常会将大项目拆分 ...

  10. Mybatis常见面试题 三

    1.什么是mybatis? (1)mybatis是一个优秀的基于java的持久层框架,它内部封装了jdbc,使开发者只需要关注sql语句本身,而不需要花费精力去处理加载驱动.创建连接.创建statem ...