EasyUI Datagrid 自定义列、Foolter及单元格编辑
1:自定义列,包括 Group
var head1Array = [];
head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 });
head1Array.push({ title: 'yyyy', colspan: 4 });
var head2Array = [];
//.each(units,function(i,unit)//colArray.push(field:′Id′,title:unit.Name);//);head2Array.push(field:′Id′,title:′111′);head2Array.push(field:′Id′,title:′222′);head2Array.push(field:′Id′,title:′333′);head2Array.push(field:′Id′,title:′444′);('#UnitScores').datagrid({
columns: [head1Array, head2Array],
footer:[{"Id":"合计"}],
showFooter: true
});
产生的效果如下:
注意,Datagrid 的 columns 的值是个数组,而数组的元素本身又是数组,相当于是个二维数组。如果不注意这一点,columns 就出不来。
2:Footer的使用
在 Footer 的使用中,必须要为 data 指定 rows 和 footer 两个属性,否则,Footer 也不会出现,如下:
var rowsx = [];
rowsx.push({ "Id": "类别类型属性名称:" });
rowsx.push({ "Id": "类别类型属性值:" });
rowsx.push({ "Id": "文本类型属性名称:" });
var footer = [{ "Id": "合计" }];
var datax = { "rows": rowsx, "footer": footer };
$('#UnitScores').propertygrid('loadData',datax);
var rows = ('#questionUnitScores').datagrid('getFooterRows'); rows[0]['Id'] = 'new name';('#UnitScores').datagrid('reloadFooter');
3:对于单元格的编辑
假设列格式应该如下:
$('#Units').datagrid({
pageNumber: 1,
//url: "@ViewBag.Domain/Paper/GetQuestionUnit",
columns: [[
{ field: 'Id', title: 'id', width: 100, editor: 'text' },
{ field: 'Name', title: 'name', width: 100, editor: 'text' }
]],
pagination: false,
rownumbers: true,
onClickCell: onClickCell
});
editor 也可以是一个类型,如下:
{field:'projectID',
title:'Project/Paid Leave',
width:100,
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'DescriptionCode',
data:cmbprojects,
required:true,
editable:false,
onSelect:function(record){
}
}
}
默认的,EasyUI 对于编辑,是以行为单位的,也就是说,你要触发编辑,首先触发的是整行的编辑,类似如下:
$('#Units').datagrid('beginEdit', index);
上面的代码的意思是,第 index 行,可以编辑。如果要编辑单元格,一般我们用于单击某单元格,某行就可以编辑,则代码如下:
function onClickCell(index, field) {
('#Units').datagrid('beginEdit', index); var ed =('#questionUnits').datagrid('getEditor', { index: index, field: field });
(ed.target).val("dddd");('#Units').datagrid('endEdit', index);
}
在上面的方法中,第二行表示得到当前的 editor,注意,getEditor 方法必须要在 beginEdit 之后,否则,我们得到的 ed 为 null。当得到了 editor ,就可以为其赋值,如果你不想在界面中输入的话。endEdit 方法关闭行的可编辑状态,并且表示 datagrid 接收了值的修改,这个时候,我们如果查看 $('#questionUnits').datagrid('getRows'),得到的就是修改过后的值。
如果在 onClickCell 中不 endEdit,还可以在外部批量接受修改的值,使用方法:
$('#Units').datagrid('acceptChanges');
即可。
3.1 如何启动对指定单元格的修改
上面也说了,beginEdit 启动的是对行的修改,如果对行中的某个单元格启动修改,而其它单元格根本不启动修改,其中一个办法是:
$(ed.target).attr("disabled", true);
3.2 如何让 Row 获取 Editor 的额外属性
除非扩展一个自己的 Eidtor,否则 Editor 只有两个属性:type,options。但是,另外一种思路是,获取 Columns 的 Options 来达到此目的。比如,定义 Editor 为:
editor: { type: 'numberbox', options: { "UnitTemplateCode": item.Id } }
然后,得到 col,如下:
var fields = $('#UnitScores').datagrid('getColumnFields');
var col = $('#UnitScores').datagrid('getColumnOption', fields[i]);
然后,通过如下代码,就可以得到额外的属性 UnitTemplateCode。
col.editor.options.UnitTemplateCode
3.3 此 Editor 非彼 Editor
在上文中,通过:
var ed = $('#Units').datagrid('getEditor', { index: index, field: field });
我们也得到了一个 Editor,即:ed,它是一个在 EasyUI 框架内定义的对象,跟我们通过 col.editor 得到的对象不是同一个对象。
EasyUI Datagrid 自定义列、Foolter及单元格编辑的更多相关文章
- Datagrid扩展方法InitEditGrid{支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
- easyui datagrid合并相同数据的单元格。
/** * 根据作用域填充单元格 */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(&quo ...
- Bootstrap:Bootstrap_table第一篇:快速用bootstrap_table(支持参数)筛选并展示数据,固定表格前几列,实现表格单元格编辑
1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...
- Repeater多列分别合并单元格
GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...
- POI教程之第二讲:创建一个时间格式的单元格,处理不同内容格式的单元格,遍历工作簿的行和列并获取单元格内容,文本提取
第二讲 1.创建一个时间格式的单元格 Workbook wb=new HSSFWorkbook(); // 定义一个新的工作簿 Sheet sheet=wb.createSheet("第一个 ...
- Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
- easyui datagrid的列编辑
[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第 ...
- C# 对Excel 单元格格式, 及行高、 列宽、 单元格边框线、 冻结设置
一.对行高,列宽.单元格边框等的设置 这篇简短的文字对单元格的操作总结的比较全面,特此转载过来. private _Workbook _workBook = null; private Workshe ...
- jqGrid单元格编辑配置,事件及方法
转自 http://blog.csdn.net/xueshijun666/article/details/18151055 // var ret = $("#in_store_list_de ...
随机推荐
- 对于 APM 用户的一次真实调查分析(下)
一.前言 对 APM 用户的一次真实调查分析(上)中,我们主要聊到了现阶段国外 APM 行业对各个企业的渗透率.大部分使用 APM 工具的企业规模以及 APM 工具在用户心中的地位等问题,有兴趣的朋友 ...
- 游戏文字自动断行需要,还得从 UTF-8 讲起
UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,也是一种前缀码. UTF-8使用一至六个字节为每个字符编码(尽管如此,2 ...
- [jobdu]最小的K个数
一开始马上想起来寻找第k小的数,是采用快排的partition方法.但因为题目要把k之前的数排序输出,这个方法就不是很合适,因为(随机化后:http://blog.csdn.net/liangbopi ...
- thinkphp 调用函数
1,定义为Common.php文件.自动加载. 2,配置文件config.php文件里配置'LOAD_EXT_FILE'=>'function'.则会自动加载function.php文件 3,使 ...
- 【Linux安全】防止 root 用户远程登录
防止 root 用户远程登录,在终端输入以下命令: vim /etc/ssh/sshd_config 修改如下行为:no PermitRootLogin no 如图所示:
- 六月计划#1A(6.1-6.8)
5/35 数学 BZOJ_[HNOI2008]_Cards_(置换+Burnside引理+乘法逆元+费马小定理+快速幂) BZOJ_1005_ [HNOI2008]_明明的烦恼_(组合数学+purfe ...
- Android 动画-alpha(渐变透明度动画效果)
今天苦于思索应用如何美观,首先从载入页面的第一眼开始,Android动画分为四种:alpha(渐变透明度),scale(渐变尺寸伸缩),translate(画面转换位置移动),rotate(画面转移旋 ...
- Spring面试题汇总
一.Spring最核心的功能是什么?使用Spring框架的最核心的原因是什么? Spring 框架中核心组件有三个:Core.Context 和 Beans.其中最核心的组件就是Beans, Spri ...
- 修改SR4000自带软件,支持opencv
/*----------------------------------------------------------------------------- * * 版权声明: * 可以任意转载 ...
- JZ2440开发笔记(9)——位置无关代码设计【转】
b MAIN 和 ldr pc,=MAIN 的区别(谈到代码位置无关性) 看bootloader的时候经常看到这两种写法,不太明白区别,网上查了查.其实看了之后还是一头雾水? 其中,2和3 似乎是一个 ...