easyui的datagrid的列checkbox自定义增加disabled选项

  需求根据权限判断datagrid的每一列的checkBox是否可选,看了下文档,发现editor的checkbox应该能实现这个功能,但我们项目自己将easyui外面包了一层,把原生的editor改成了浮动形式的,并且由外面包那一层那初始化这个浮动的editor。而我要改的地方没有用外面包这样一层,如果用的话会很麻烦,牵扯的地方很多,于是就只有在Column的checkBox属性上想办法了。

  看easyui的源代码,找到defaultView的renderRow方法,在渲染checkBox的地方cc.push(‘input
type=‘checkbox‘)加上判断if(col.checkFormatter)就调用checkFormatter方法,获得visible,checked,enabled属性,然后用这些属性渲染那个input就可以了。

  然后在column的属性里加上这两个属性:checkbox:true,checkFormatter:function(fied,rowData,rowIndex){return
{visible:,checked:,enabled:}},这里调用这个方法的时候将三个参数传进去了,并且将this指针也改变了。col.checkFormatter.call(col,rowData[field],rowData,rowIndex)。

  其实更好的方式可以把这两个属性合并成一个属性,就用checkBox就可以,先判断checkBox是不是boolean类型的,如果是就直接过,如果不是那么看看是不是对象,再从对象里找想要的属性。

时间: 2024-08-06 20:08:13

easyui的datagrid的列checkbox自定义增加disabled选项的相关文章

EasyUI的DataGrid日期列(datebox)正确显示json时间格式

问题描述: 前端使用EasyUI,后台使用Spring MVC, 数据库里面存储的时间格式为:2014-06-10,但是后台返回给前台页面的数据是json格式的,类似于:1402367297000的形式,日期列datebox是无法解析的.具体如下图: 自己也是EasyUI小白,网上查查资料,倒腾下总算搞出来了,这里做下记录. 一般情况下我们所需的日期格式都是:2014-02-02或者2014/09/09形式的,因此首先要考虑实现一个添加日期格式化的插件. jQuery日期格式化 在自己的js中添

easyUI 中datagrid 返回列隐藏方法

easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', width : 50, align : 'center', formatter : returnFtt },{ field : 'agencyName', title : '市场名称', width : 50, align : 'center' },{ field : 'agencyId', titl

使用easyUI 为datagrid冻结列

转自http://www.cnblogs.com/javaexam2/archive/2012/08/10/2632648.html 这个示例演示如何冻结一些列,冻结列不能滚动到视图的外部,当用户移动水平滚动条他将穿过grid. 查看 Demo 冻结列你需要定义frozenColumns 属性,frozenColumn 属性和columns 属性一样. $('#tt').datagrid({ title:'Frozen Columns', iconCls:'icon-save', width:5

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

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

[Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

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 动态绑定列

查了很多资料,有点乱 首先声明一下这里必须要用easyui1.3.1 不多说直接上代码: 首先打开jquery.easyui.min.js,查找_53b() 找到下面的代码 function _53b(){ var _53c=opts.loader.call(_538,_53a,function(data){ setTimeout(function(){ $(_538).datagrid("loaded"); },0); _4b1(_538,data); setTimeout(func

easyui datagrid的列编辑

[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的. 国际惯例,上代码 <div id="cc" class="easyui-layout" style="width: 100%; height: 380px;"> <div data-option

EasyUI中datagrid实现显示、增加、 删除、 修改、 查询操作(后台代码C#)

2datagrid加载数据.代码如下所示 一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script>  <script src="easyui/js/jquery.easyui.min.js"></script>  <link href="easyui/css/themes/d