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 得到的对象不是同一个对象。

时间: 2024-11-07 01:48:47

EasyUI Datagrid 自定义列、Foolter及单元格编辑的相关文章

EasyUI DataGrid根据字段动态合并单元格

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

[easyui][datagrid]EasyUI DataGrid根据字段动态合并单元格

1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable = $("#" +

EasyUi datagrid(onClickCell:用户单击一个单元格时触发 ) 單擊編輯 editor:{type: &#39;combobox&#39;}

1.columns列[一個單元格] 添加combobox下拉選項 $("#userGrid").datagrid({ singleSelect: true,            onClickCell: function (index, field, value) {                //Field = field;                //                var rows = $('#' + UserGrid).datagrid('getRo

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

获取table表格指定列的所有单元格的内容

获取table表格指定列的所有单元格的内容:本章节介绍一下如何获取表格指定列的所有单元格的内容,这可能在一些应用或者说扩展应用中会需要.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <titl

POI教程之第二讲:创建一个时间格式的单元格,处理不同内容格式的单元格,遍历工作簿的行和列并获取单元格内容,文本提取

第二讲 1.创建一个时间格式的单元格 Workbook wb=new HSSFWorkbook(); // 定义一个新的工作簿 Sheet sheet=wb.createSheet("第一个Sheet页"); // 创建第一个Sheet页 //第一个单元格 Row row=sheet.createRow(0); // 创建一个行 Cell cell=row.createCell(0); // 创建一个单元格 第1列 cell.setCellValue(new Date()); // 给

VBA选中多行多列及多单元格

选中多个单元格 Range("<单元格地址>:<单元格地址>[,<单元格地址>--]").Select 例:Range("A1:B2").Select   '选中"A1"."A2"."B1"."B2"四个连续的单元格 Range("12:12").Select   '选中第12行 Range("B:B").Sel

easyui datagrid的列编辑

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

MFC List Control控件添加单元格编辑和单元格下拉列表项以适用于数据库相关操作

作为现代的软件,往往是连着数据库的,而连着和用户方便地操作之间,还有着界面这道坎.MFC是Windows上比较好开发用户界面的框架,然而其自带的控件中没有对于数据库表格支持较好的控件,而使用网上提到的 DataGrid 等控件在本人的win8.1+VS2013平台上老出现找不到控件或者头文件的问题,搞的烦死人.最后想到 List Control 控件只要稍作修改,加上单元格编辑和单元格下拉列表,其实就能和数据库进行良好的对接,一百度,果然有人已经做了这件事,实在是太让人感动了!