datagrid editor 上、下、回车键自定义【分分快三计

作者:分分快三计划

$('#dg').datagrid('beginEdit', getRowIndex(target));
$('#dg').datagrid('endEdit', getRowIndex(target));
$('#dg').datagrid('cancelEdit', getRowIndex(target));

定义如何从远程服务器加载数据,返回“false”可以终止这个请求。

2. 一个完整的成绩表格编辑功能;编辑完成后将最新的值存储到后台;

 · 如果之前有值,清空之后,回车,将显示之前的值;

 ·  如果之前无值,清空之后,回车,将显示“为录入”;

 ·  如果之前有值,改变值之后,回车,将显示最新改变的值;

 ·  用到的小知识点:

(1)、将数值转换为整数:parseInt(zcj)

(2)、将数值转换为带一位小数的数值:parseFloat(zcj).toFixed(1)

(3)、三元表达式: 条件 ? 条件成立执行此语句 :条件不成立执行此语句;

(4)、字符串截取:str.subString(1,10); - 截取的为str的索引值从1到9之间的字符(索引值是从0开始的);

(5)、将字符转为数组:str.split(",");  - 以逗号为分割点,转换为数组;

//datagrid editor - 点击上键表示“ 1”,点击下键表示“-1”,点击回车表示“编辑完成”;

//定义命名空间对象,因为页面较多,避免冲突

nameSpace.ns("CJGL.cjlr");

CJGL.cjlr = {

    //定义此命名空间对象中的所有全局变量

bl: {

cjlr_grade_Name: '',

cjlr_grade_value: 0

},

init: function(){//初始化函数

var dg = $('#cjlr_dg').datagrid({//给datagrid组件赋值

url: "/cjlrxsxx/getStudents",

queryParams: { ... },

    onLoadSuccess: function(data){ ... },

onClickCell: function(index,field,value){//当点击datagrid editor中的单元格时触发此事件

      //获取特定的编辑器,options参数有2个属性:index:行索引。field:字段名。

var ed = $('#cjlr_dg').datagrid('getEditor', {index:index,field:field});

//获取编辑框的值

var pscj_oldValue = $(ed.target).numberbox('getValue');

//将编辑框的字段名存储到全局变量中

CJGL.cjlr.bl.cjlr_grade_Name = field;

//获取到编辑框的值是空的还是有数值,空的的话将“未录入”存入变量中,非空将获取到的编辑框的值存入变量中(当键盘未做任何编辑,将内容清空的时候用到此处变量)

pscj_oldValue == "" ? CJGL.cjlr.bl.cjlr_grade_value = "未录入" : CJGL.cjlr.bl.cjlr_grade_value = pscj_oldValue;

//键盘上/下/enter事件触发

$('.datagrid-editable .textbox,.datagrid-editable .datagrid-editable-input,.datagrid-editable .textbox-text').bind('keydown', function(e){

var code = e.keyCode || e.which;

ed = $('#cjlr_dg').datagrid('getEditor', {index:index,field:field});

//获取编辑框的值;

pscj_oldValue = $(ed.target).numberbox('getValue');

CJGL.cjlr.bl.cjlr_grade_Name = field;

pscj_oldValue == "" ? CJGL.cjlr.bl.cjlr_grade_value = "未录入" : CJGL.cjlr.bl.cjlr_grade_value = pscj_oldValue;

if(code == 13){//回车键 - 结束编辑

$('#cjlr_dg').datagrid('acceptChanges');

$('#cjlr_dg').datagrid('endEdit', index);

}else if(code == 38){//上键 - 加1

if(!pscj_oldValue){

$(ed.target).numberbox('setValue',0);

pscj_oldValue = $(ed.target).numberbox('getValue');

}

var newValue_cj = parseInt(pscj_oldValue) 1;

$(ed.target).numberbox('setValue',newValue_cj);

return false;

}else if(code == 40){//下键 - 减1

var newValue_cj = parseInt(pscj_oldValue) - 1;

$(ed.target).numberbox('setValue',newValue_cj);

return false;

}

});

},

onAfterEdit: function(index,row,changes){//结束编辑

        CJGL.cjlr.bl.cjlrxsxxId = row.openid;

if(JSON.stringify(changes).length >2){//改变了值

var changeValue = JSON.stringify(changes);

var changeName = changeValue.substring(1, changeValue.length-1).split(":")[0].replace(/"/g, "");

var changeText = changeValue.substring(1, changeValue.length-1).split(":")[1].replace(/"/g, "");

if(changeText.length == 0){//录入值为空 - 填入"未录入"或之前数值

row[CJGL.cjlr.bl.cjlr_grade_Name] = CJGL.cjlr.bl.cjlr_grade_value;

//更新表格

$('#cjlr_dg').datagrid('updateRow',{

index: index,

row: row

});

$('#cjlr_dg').datagrid('refreshRow', index);

}else{//改变的值为非空,有数值

//是否保留一位小数,来判断单元格的值的格式;

row.sfblywxs == 1 ? (row[changeName] = parseFloat(changeText).toFixed(1)) : (row[changeName] = parseInt(changeText));

row.pscj == "未录入" ? (row.sfblywxs == 1 ? row.pscj = 0.0 : row.pscj = 0) : (row.sfblywxs == 1 ? row.pscj = parseFloat(row.pscj) : row.pscj = parseInt(row.pscj));

row.kscj == "未录入" ? (row.sfblywxs == 1 ? row.kscj = 0.0 : row.kscj = 0) : (row.sfblywxs == 1 ? row.kscj = parseFloat(row.kscj) : row.kscj = parseInt(row.kscj));

//总成绩 = 60%的考试成绩 40%的平时成绩;

var zcj = row.kscj * 0.6 row.pscj * 0.4;

row.sfblywxs == 1 ? zcj = parseFloat(zcj).toFixed(1) : zcj = parseInt(zcj);

row.cjzfs = zcj;

//更新修改过的单元行

$('#cjlr_dg').datagrid('updateRow',{

index: index,

row: row

});

$('#cjlr_dg').datagrid('refreshRow', index);

//保存平时成绩/考试成绩

CJGL.cjlr.save(row.pscj, row.kscj);

}

$('#cjlr_dg').datagrid('updateRow',{

index: index,

row: row

});

$('#cjlr_dg').datagrid('refreshRow', index);

//保存平时成绩/考试成绩

if(row.pscj<0 || row.kscj<0){

$.messager.alert('提示信息','请录入正确的成绩分数!');

$('#cjlr_dg').datagrid("reload");

}else{

CJGL.cjlr.save(row.pscj, row.kscj);

}

}

}

});

dg.datagrid('enableCellEditing');//让表格拥有编辑功能;

$(function(){

CJGL.cjlr.init();//调用页面初始化函数;

});

easyui 中datagrid
$('#dg').datagrid('getSelected');返回第一个被选中的行或如果没有选中的行则返回null。
$('#dg').datagrid('getSelections');返回所有被选中的行,当没有记录被选中的时候将返回一个空数组。
$('#dg').datagrid('getRows');
$("#dg").datagrid('getChanges',"inserted");//获取新添加的行
$("#dg").datagrid('getChanges',"deleted");//获取删除的行
$("#dg").datagrid('getChanges',"updated");//获取修改的行
$('#dg').datagrid('getChanges');
$('#dg').datagrid('validateRow', editIndex);//返回bool 值,用来验证选项

getRows none 返回当前页的行。

1. datagrid editor取值/赋值:

//以numberbox为例

//1. 取值

vared=$('#cjlr_dg').datagrid('getEditor', {index:index,field:field});

varpscj_oldValue=$(ed.target).numberbox('getValue');

//2. 赋值

$(ed.target).numberbox('setValue',0);

$('#dg').datagrid('appendRow',{status:'P'});
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('deleteRow',index);
$('#dg').datagrid('updateRow', {
index: index,
row: {}
});

onCheckAll rows 当用户勾选所有行时触发,这个事件在1.3版本后有效。

如果设置为True,点击复选框将总会选择行。

getFooterRows none 返回页脚行。

columns array DataGrid列的配置对象,更多详细请参见列属性。 undefined

 6       class="easyui-linkbutton" 

13 });

2     index: 2,

index: 要更新的行下标索引。

17             } else {   

7 });

 2     toolbar: '#tb'

 

6 });

rejectChanges none 回滚自其创建后所有更改的数据,或者从最近一次 acceptChanges 被调用。

2     name: 'new name',

3     row: {

11             <td>001</td><td>name1</td><td>2323</td>  

5     },'-',{

DataGrid的列是一个数组对象,它的元素也是一个数组。元素的元素数组是一个配置对象,它定义了每一列的字段。

 1 // update footer row values and then refresh

rowData: 取消选中的行记录

rowData: 行数据记录

复制代码

nowrap boolean 设置为“True”则将数据显示在一行内,设置为“True”可以提高加载性能。 true

 

 9         }

 

 

复制代码

 9     <tbody>  

5         {field:'name',title:'Name',width:100},   

 

loaded none 隐藏加载状态。

名称 参数 描述

4         subject: 'datagrid'

onSelect rowIndex, rowData 当用户选择一行时触发,这些参数包括:

2     code: '01',

10             }

method string 这个方法需要远程数据类型。 post

1 $('#dg').datagrid('appendRow',{

 7                 } else {

onRowContextMenu e, rowIndex, rowData 当行时右键点击时触发。

onUncheckAll rows 当用户取消勾选所有行时触发,这个事件在1.3版本后生效

sortName string 定义哪些列可以被排序。 null

例如,在Editor编辑器中如下定义:

通常通过传递一个参数做一个查询,这个方法可以成为从服务器加载新数据。

 2     <thead>  

 5             sorter:function(a,b){  

rowData: 编辑的行记录

 1 $('#dg').datagrid({

scrollbarSize number 滚动条的款(当是垂直滚动条时) 或者 高(当是水平滚动条的时候) 18

 7     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   

名称 参数 描述

13         resize: function(target, width){   

 

 

 

 

 2         data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  

 8                     return value;

14                 } else {  

  DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据。

onLoadSuccess data 数据加载时触发。

 1 <table class="easyui-datagrid" style="width:400px;height:250px"  

1 $('#dg').datagrid('load', {   

重写默认值:$.fn.datagrid.defaults.view.

 

6         iconCls: 'icon-help',

onAfterEdit rowIndex, rowData, changes 当用户完成编辑时触发,这些参数包括:

10         setValue: function(target, value){   

10       data-options="iconCls:'icon-help',plain:true"></a>

改变数据到服务器后,更新之前的数据:

2     name: 'easyui',   

代码示例:

11         }

 

 

getData none 返回加载的数据。

DataGrid

13         <tr>  

width number 列的宽度,如果没有定义,宽度将会自动扩展以容纳其内容。 undefined

rowStyler function 返回例如 'background:red' 一样的风格样式,这个方法带两个参数:

container: 行容器。

20         }   

field: 字段名称

frozenColumns array 相同列的属性,但是这些列会被冻结在左边。 undefined

validateRow index 验证指定的行,返回“true”时有效。

10         <tr>  

styler function 单元格样式函数,返回例如 'background:red' 一样的用户自定义的样式字符串。这个函数带有三个参数:

1 $('#dg').datagrid({

getChecked none 返回复选框被选中的所有行,这个方法在1.3版本后可用。

checkAll none 选中当前页面所有行,这个方法从1.3版本之后可用。

 

order: 排序列的顺序

 

 

 2     columns:[[

rowData: 对应着编辑的行记录

 

8     }

复制代码

rowIndex: 编辑行的下标,从0开始

12         </tr>  

 8     {field:'attr1',title:'Attribute',width:100},   

remoteSort boolean 定义是否接受来自远程服务器的排序数据。 true

onSortColumn sort, order 当用户排序一列时触发,这些参数包括:

onCheck rowIndex,rowData 当用户勾选一行时触发,这些参数包括:

insertRow param

16     </tbody>  

rowIndex: 行下标

getSelections none 返回所有选定的行,当没有选中记录的时候,将返回一个空数组。

如果设置为“False”,当用户准确点击复选框时,选中/取消选中 该复选框。

 

 

1 var opts = $('#dg').datagrid('getColumnFields');    // 获取非冻结列

 

 5             <th data-options="field:'code',width:100">Code</th>  

[方法]

 

formatter function 单元格格式化的函数,带有三个参数:

index: 要插入新行的下标索引位置,如果没有指定,则在后面拼接新增。

onUnselectAll rows 当用户取消选中所有行时触发。

 

5 });

这个类型参数指明哪些类型更改了行,可能的值如下:inserted,deleted,updated,等.

param: 向远程服务器传递的参数对象。

1 $('#dg').datagrid('fixColumnSize', 'name');  // 固定‘name’列的大小

如果设置为“True”,当用户点击一行时 选中/取消选中 该复选框。

hideColumn field 隐藏指定的列。

这个属性在1.3版本后可用。 bottom

 

 4             formatter: function(value,row,index){

 

复制代码

onUncheck rowIndex,rowData 当用户取消勾选一行时触发,这些参数包括:

17             }  

 3 });

 

 2 var rows = $('#dg').datagrid('getFooterRows');

 9     }

10 </table>  

 

 

 

这个事件在1.3版本后生效

 4 <div id="tb">

rowIndex: 勾选的行下标,从0开始

复制代码

复制代码

11                     } else {  

 9     </thead>  

beginEdit index 开始编辑行。

 3     loadFilter: function(data){

url string 一个用于请求远程站点的URL路径。 null

actions: 该编辑器可以做的action动作,和编辑器定义一样。

 3         {field:'listprice',title:'List Price', width:80, align:'right',

 8         </tr>  

7         handler: function(){alert('help')}

15             if ($.boxModel == true){   

field: 字段名称。

toolbar array,selector DataGrid面板顶部的 ToolBar 工具条,可以设置的值如下:

如果设置为False,选中行将不会选中该复选框。

7         note: 'some messages'

rowData: 行数据记录

你可以将原始数据源更改为标准的数据格式。

 8     </thead>  

selectRow index 选择一行,行下标从0开始。

resizable boolean 设置为“True”则可以调整列的大小。 undefined

rowIndex: 单击行的索引,从0开始。

idField string 指定哪些字段是标识字段。 null

18         }

undefined

名称 类型 描述 默认值

复制代码

 3         {field:'userId',title:'User', width:80,

 

4             return 'background-color:#6293BB;color:#fff;';

 

updateRow param 更新指定的行,该参数包含以下属性:

 

field string 列的字段名称。 undefined

2 $('#dg').datagrid('fixColumnSize');  // 固定所有列大小

rowIndex: 取消选中的行下标,从0开始

 

field: 字段名称

changes: 更改的 字段/值 对。

 7             return data;

fitColumns none 使列自动 展开/收缩 以适应网格的宽度。

 8 $('#dg').datagrid('reloadFooter',[

 

b: 第二个字段值

8     }]

4 });  

rowData: 对应着勾选的行记录

rowData: 对应点击的行记录

view object 定义DataGrid的View视图。 default view

 9                     if (a[0] == b[0]){  

 

 

 1 $('#dg').datagrid({

1 // 获取 DateBox 编辑器,并且更改它的值

index: 行下标

 4             styler: function(value,row,index){

 4         <tr>  

rowData: 对应的取消选择的行记录。

 

 

2 var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});

 7                 b = b.split('/');  

 1 <table class="easyui-datagrid">  

1 $('#dg').datagrid('updateRow',{

 8   <a href="#" 

属性继承自 panel 面板,下面是从 panel 新增的属性列表:

init container, options 初始化 Editor 编辑器,并返回目标对象。

rowData: 对应着所选择的行记录

1) 一个数组,每个options项是相同的LinkButton。

2     queryParams: {

appendRow row 拼接一个新行,这个新行将会被追加在最后的位置:

代码示例:

getSelected none 返回第一个选定行的记录或null。

acceptChanges none 提交所有的更改,从它被加载或者上次 acceptChanges 被调用。

pageNumber number 当设置分页的属性时,初始化页面数量。 1

 

 6                 a = a.split('/');  

rowIndex: 编辑的行下标,从0开始

a: 第一个字段值

继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults. DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据...

15                     return (a[2]>b[2]?1:-1);  

 1 $('#dg').datagrid({

复制代码

7     ]]   

 

singleSelect boolean 设置为“True”则只允许选择一行。 false

 

10                         return (a[1]>b[1]?1:-1);  

这个函数必须返回一个包含“total”和“rows”属性的标准数据对象。

使用一些参数查询数据:

rownumbers boolean 设置为“True”则显示行数列。 false

1 <table id="dg"></table>  

 2 $('#dg').datagrid({

5     }

 9         },   

onCancelEdit rowIndex, rowData 当用户取消编辑一行时触发,这些参数包括:

loader function

4         handler: function(){alert('edit')}

 

代码示例:

复制代码

使用Javascript也可以创建DataGrid:

 2     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   

onHeaderContextMenu e, field 当DataGrid的标题是右键点击时触发。

undefined

onUnselect rowIndex, rowData 当用户取消选择行时触发,这些参数包括:

该视图是一个对象,它会告诉DataGrid中如何呈现行。该对象必须定义了一下功能函数:

loadMsg string 当从远程站点加载数据时,显示一个提示信息。 Processing, please wait …

 

renderFooter target, container, frozen 这是一个可选的功能,呈现页脚。

 2     columns:[[

5         note: 'new note message'

target: Dom对象,DataGrid对象。

onDblClickCell rowIndex, field, value 当用户双击单元格时触发。

checkOnSelect boolean

 6                     return row.user.name;

target: 目标编辑器的jQuery对象。

 2     remoteSort: false,

 

getRowIndex row 返回指定行的索引,row行参数可以是一个行记录或一个id字段值。

14             <td>002</td><td>name2</td><td>4612</td>  

复制代码

复制代码

colspan: 要合并的列数

 

checkRow index 选中一行,行下标从0开始,这个方法从1.3版本之后可用。

4     note: 'some messages'

 

17 </table>  

onAfterRender target 视图在Render后触发。

[DataGrid View]

显示返回过滤后的数据。这个函数带一个参数 'data',它表示原始数据。

11 ]);

getPager none 返回paper页面对象。

21     }   

19             }   

复制代码

每个 editor 编辑器都有以下行为:

onDblClickRow rowIndex, rowData 当用户双击行时触发,这些参数包括:

options: object, 对应于编辑类型的编辑器选项。 undefined

 

15         </tr>  

 

onSelectAll rows 当用户选择所有行时触发。

rowspan: 要合并的行数

在HTML标签中,从现有的元素创建表元素、定义列、行中的数据:

 

 7         getValue: function(target){   

 7 // update footer rows with new data

2) 一个 selector 选择器 指定 ToolBar 工具条。

10 });

 2     text: {   

uncheckAll none 取消选中当前页所有行,这个方法从1.3版本之后可用。

6         age: 30,

loadFilter function

getValue target 从 Editor 编辑器获取数据值。

editor string,object 显示编辑类型,当字符串指明了编辑类型,对象包含两个属性:

这个函数需要以下参数:

 4         {field:'date',title:'Date',width:80,sortable:true,align:'center',  

复制代码

代码示例如下:

重写默认值 $.fn.datagrid.defaults.editors.

 5 $('#dg').datagrid('reloadFooter');

复制代码

onClickRow rowIndex, rowData 当用户点击一行时触发,这个参数包括:

复制代码

 3 rows[0]['name'] = 'new name';

getColumnFields frozen 返回列字段。如果冻结设置为true,则冻结列字段返回。

 

selectOnCheck boolean

 3     <thead>  

pageList array 当设置分页属性时,初始化页面大小选择列表、 [10,20,30,40,50]

rowspan number 表示应该占据多少行。 undefined

 

复制代码

3         name: 'easyui',

代码示例:

index: 行下标索引

pagination

 

代码示例:

复制代码

unselectRow index 取消选中行。

 6             <th data-options="field:'price'">Price</th>  

 8                 if (a[2] == b[2]){  

通过数组定义 ToolBar:

复制代码

pagination boolean 设置为“True”则在DataGrid底部显示分页工具条按钮。 false

16                 }  

3         if (row.listprice>80){

通过<table>标签创建DataGrid,在table表格里嵌套<th>标签定义。

 9                 }

3     address: 'ho'  

onResizeColumn field, width 当用户调整列大小时触发。

 

 

 3     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   

 

11             $(target).val(value);   

 4         if (data.d){

 

onBeforeEdit rowIndex, rowData 当用户开始编辑一行时触发,这些参数包括:

 8         }

onBeforeRender target, rows 视图Render前触发。

 

13                     }  

sortable boolean 设置为“True”则指定列可以排序。 undefined

true

复制代码

代码示例:

selectAll none 选择当前页面所有的行。

 5                 if (row.user){

6         $(ed.target).focus();

代码示例:

 6             <th data-options="field:'name',width:100">Name</th>  

1 $('#dg').datagrid('load',{

 5             <th data-options="field:'name'">Name</th>  

1 $('#dg').datagrid({

refreshRow target, rowIndex 定义如何刷新指定的行。

[依赖于]

20 });

rowData: 符合记录数的行

1 // 当双击一个单元格时,赋予Editor编辑器焦点,以开始编辑

1 $('#dg').datagrid({

 

mergeCells options 合并某个列为一个列,这个选项包含以下属性:

 7                 }

panel

这个属性时1.3版本之后可用的。

 3     columns: [[

3     age: 30,

sorter function 用来做局部排序的自定义字段的排序功能,带有两个参数:

复制代码

获取自从上次提交后的产生更改的行。

editors object 定义编辑行时的编辑器。 predefined editors

 1 $('#dg').datagrid({

rowIndex: 编辑的行下标,从0开始

 

9 });

 

2     rowStyler: function(index,row){

4     row: {

 

{}

rowData: 对应着编辑的行记录

  DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识。它是轻量级的和功能丰富的。合并单元格,多列标题,冻结列和页脚是仅有的几个特点。

2     toolbar: [{

 

loading none 显示加载状态。

 

 5 ],[   

4 });

复制代码

9 });

value: 字段值

[事件]

复制代码

22 });  

Editor

autoRowHeight boolean 定义是否基于行的内容设置行高,设置“false”可以提高加载性能。 true

5         name: 'new name',

type: 编辑器类型,例如'text','combobox','datebox', 等.

sort: 排序的列的字段名称

getColumnOption field 返回指定列的选项option设置。

 1 // 从 ASP.NET Web Service Json 输出中删除“d”对象

 7             <th data-options="field:'price',width:100,align:'right'">Price</th>  

 6                     return 'background-color:#ffee00;color:red;';

10 ]]  

fixRowHeight index 固定指定的行高,如果“index”参数没有分配,则所有行高都将是固定的。

rowIndex: 取消选择的行下标,从0开始

 5                 if (value < 20){

json loader

 

 

代码示例:

8 });  

1 $('#dg').datagrid({   

 

使用<div>标签定义 ToolBar 工具条:

reload param 重新加载行,和“load”方法一样,但是停留在当前页面。

 7         </tr>  

3     name: 'name01'

3         iconCls: 'icon-edit',

12     ]]

19     ]]

 

复制代码

 6     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   

名称 类型

load param

 5             return input;   

null

 

7 });

 4     {title:'Item Details',colspan:4}   

rowIndex: 单击行的索引,从0开始。

代码示例:

row: 新行的数据。

endEdit index 结束编辑行。

3     columns:[[   

 9     {field:'status',title:'Status',width:60}   

[列属性]

title string 列的标题文本。 undefined

 

 3         init: function(container, options){   

pageSize number 当设置分页属性时,初始化页面大小。 10

 4             <th data-options="field:'code'">Code</th>  

 

striped boolean 设置“True”实现各行变色的功能。 false

 

10     ]]

cancelEdit index 取消编辑行

10     {name: 'name2', salary: 65000}

3 $(ed.target).datebox('setValue', '5/4/2012');

 4 rows[0]['salary'] = 60000;

 

getEditors index 获取指定的行编辑器,每个编辑器具有以下属性:

加载并显示在第一页的行,如果‘param’指定了,那么它便会随着QueryParams属性取代。

11 </div>

3     onDblClickCell: function(index,field,value){

 

align string 表示如何排列对齐列数据,可以用的值有:'left','right','center'。 undefined

 

 

colspan number 表示应该占据多少列。 undefined

resize target , width 如果需要则调整 Editor 编辑器。

 

 

rowIndex: 行的下标索引,从0开始

12                         return (a[0]>b[0]?1:-1);  

复制代码

undefined

true

名称 参数 描述

代码示例:

2 var opts = $('#dg').datagrid('getColumnFields', true); // 获取冻结列

linkbutton

 

 9       class="easyui-linkbutton" 

deleteRow index 删除一行。

 

 8             return $(target).val();   

6         {field:'price',title:'Price',width:100,align:'right'}   

clearSelections none 清除所有的选择。

rowIndex: 选择行的索引,从0开始

row: 要新增的行数据,

4         name: 'new name',

复制代码

复制代码

2 $('#dg').datagrid({

 

插入一个新行,该参数包含以下属性:

 5   <a href="#" 

4         {field:'code',title:'Code',width:100},   

showColumn field 显示指定的列。

success(data): 这个回调函数会在检索数据成功后调用。

fixColumnSize field 固定列的大下,如果‘field’参数没有被分配,则所有列大小都将是固定的。

[使用实例]

getPanel none 返回panel面板对象、

4         $(this).datagrid('beginEdit', index);

14             var input = $(target);   

checkbox boolean 设置为“True”则显示一个复选框,该复选框有固定的宽度。 undefined

uncheckRow index 取消选中一行,行下标从0开始,该方法从1.3版本之后可用。

7     }

 

复制代码

复制代码

5         }

 

getEditor options 获取指定的编辑器,该选项包含两个属性:

frozen: 表示是否呈现冻结容器。

 

 3         <tr>  

getChanges type

 6         } else {

这个时间继承自 panel 面板,一下是DataGrid另增的事件:

1 $('#dg').datagrid('reload');    // 重新加载当前页的数据 

rowData: 对应单击的行记录

options none 返回options选项对象。

 

unselectAll none 取消选择当前页面的所有行。

复制代码

autoSizeColumn field 调整列宽度以适应其内容,这个方法在1.3版本之后可用。

resize param 做调整,做布局。

 

 6         },   

 1 columns:[[   

复制代码

当类型参数没有指定时,返回所有更改的行。

fitColumns boolean 为“true”则自动 展开/收缩 列的大小,为了自动填充Grid的宽度,防止出现水平滚动条。 false

selectRecord idValue 通过id值参数选中一行。

renderRow target, fields, frozen, rowIndex, rowData 这是一个可选的功能,函数将会被render调用。

6     }

pagePosition string 定义分页工具条的位置,有效值是:'top','bottom','both'。

11 });

onClickCell rowIndex, field, value 当用户点击单元格时触发。

showFooter boolean 定义是否显示行的页脚。 false

 

 9     {name: 'name1', salary: 60000},

代码示例:

hidden boolean 设置为“True”则隐藏列。 undefined

1 // 在第二行插入新行

refreshRow index 刷新行。

 5             return data.d;

这个事件在1.3版本后有效。

onBeforeLoad param 在一个请求加载数据之前触发,如果返回“false”则取消加载操作。

复制代码

2     url:'datagrid_data.json',   

 

 4             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   

 1 $.extend($.fn.datagrid.defaults.editors, {   

6     }

12         },   

rowIndex: 行下标

resizable

18                 input.width(width);   

value: 字段值

 7       data-options="iconCls:'icon-edit',plain:true"></a>

loadData data 加载本地数据,旧的行会被删除。

 

 

名称 参数 描述

 

 

destroy target 如果有必要则摧毁 Editor 编辑器。

 6 

setValue target , value 设置 Editor 编辑器的数据值。

showHeader boolean 定义是否显示行的页眉。 true

sortOrder string 定义列的排序方式,只能是升序“asc”或降序“desc”。 asc

复制代码

queryParams object 当请求远程数据时,附带发送额外的参数。

2 $('#dg').datagrid('insertRow',{

3     index: 1,    // index start with 0

render target, container, frozen 数据加载时调用。

描述 默认值

[DataGrid 属性]

onLoadError none 当加载远程数据时发生一些错误的时候触发。

 

  继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults.

16                 input.width(width - (input.outerWidth() - input.width()));   

reloadFooter footer 重新加载页脚行,代码示例:

 8             }

error(): 这个函数会在检索数据失败时调用。

5         var ed = $(this).datagrid('getEditor', {index:index,field:field});

8 });

这个属性在1.3版本后可用。

代码示例:

type: string,编辑的类型,可以是的值:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 日记本 EasyUI