JQuery Easy Ui dataGrid 数据表格

数据表格 - DataGrid

继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。.

数据表格显示的数据以表格的形式，并提供了丰富的选择，排序，分组和编辑数据的支持。这个数据表格被设计以缩短开发时间，并要求开发商没有具体的知识。它是轻量级的，功能丰富的。单元格合并，多列标题，冻结列和页脚是其功能只是一小部分。

依赖组件（Dependencies）

使用方法（Usage Example）

从现有的表单元素创建数据表格，定义在html中的行，列和数据。

  1. <table class="easyui-datagrid">
  2. <thead>
  3. <tr>
  4. <th data-options="field:'code'">Code</th>
  5. <th data-options="field:'name'">Name</th>
  6. <th data-options="field:'price'">Price</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>001</td><td>name1</td><td>2323</td>
  12. </tr>
  13. <tr>
  14. <td>002</td><td>name2</td><td>4612</td>
  15. </tr>
  16. </tbody>
  17. </table>

<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'code'">Code</th>
<th data-options="field:'name'">Name</th>
<th data-options="field:'price'">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>name1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>name2</td><td>4612</td>
</tr>
</tbody>
</table>

通过<TABLE>标记创建的DataGrid。嵌套的<TH>标签定义的列的表。

  1. <table class="easyui-datagrid" style="width:400px;height:250px"
  2. data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
  3. <thead>
  4. <tr>
  5. <th data-options="field:'code',width:100">Code</th>
  6. <th data-options="field:'name',width:100">Name</th>
  7. <th data-options="field:'price',width:100,align:'right'">Price</th>
  8. </tr>
  9. </thead>
  10. </table>

<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table>

使用JavaScript创建数据表格。

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

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

  1. $('#dg').datagrid({
  2. url:'datagrid_data.json',
  3. columns:[[
  4. {field:'code',title:'Code',width:100},
  5. {field:'name',title:'Name',width:100},
  6. {field:'price',title:'Price',width:100,align:'right'}
  7. ]]
  8. });

$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});

查询数据填充数据表格。

  1. $('#dg').datagrid('load', {
  2. name: 'easyui',
  3. address: 'ho'
  4. });

$('#dg').datagrid('load', {
name: 'easyui',
address: 'ho'
});

数据更改与服务器交互，刷新当前数据。

  1. $('#dg').datagrid('reload');    // reload the current page data

$('#dg').datagrid('reload'); // reload the current page data

数据表格属性（DataGrid Properties）

属性继承控制面板，以下是数据表格独有的属性。

名称 类型 描述 默认值
columns array 数据表格列配置对象，查看列属性以获取更多细节。 undefined
frozenColumns array 跟列属性一样，但是这些列固定在左边，不会滚动。 undefined
fitColumns boolean 设置为true将自动使列适应表格宽度以防止出现水平滚动。 false
autoRowHeight boolean 定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。 true
toolbar array,selector 数据表格顶部面板的工具栏。可能的值：
1）数组，每个工具选项和链接按钮相同。
2）选择显示的工具栏。
在一个<div>的标签定义工具栏:

$('#dg').datagrid({

	toolbar: '#tb'

});

<div id="tb">

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>

</div>

通过数组定义工具栏:

$('#dg').datagrid({

	toolbar: [{

		iconCls: 'icon-edit',

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

	},'-',{

		iconCls: 'icon-help',

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

	}]

});
null
striped boolean 设置为true将交替显示行背景。 false
method string 请求远程数据的方法类型。 post
nowrap boolean 设置为true，当数据长度超出列宽时将会自动截取。 true
idField string 表明该列是一个唯一列。 null
url string 一个用以从远程站点请求数据的超链接地址。 null
loadMsg string 当从远程站点载入数据时，显示的一条快捷信息。 Processing, please wait …
pagination boolean 设置true将在数据表格底部显示分页工具栏。 false
rownumbers boolean 设置为true将显示行数。 false
singleSelect boolean 设置为true将只允许选择一行。 false
checkOnSelect boolean 如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。
此属性是1.3版本。		 true
selectOnCheck boolean 如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。
此属性是1.3版本。		 true
pagePosition string  定义的分页栏的位置。可用的值有 'top','bottom','both'。
此属性是可自1.3版本。		 bottom
pageNumber number 当设置分页属性时，初始化分页码。 1
pageSize number 当设置分页属性时，初始化每页记录数。 10
pageList array 当设置分页属性时，初始化每页记录数列表。 [10,20,30,40,50]
queryParams object 当请求远程数据时，发送的额外参数。

示例:

$('#dg').datagrid({

	queryParams: {

		name: 'easyui',

		subject: 'datagrid'

	}

});
{}
sortName string 当数据表格初始化时以哪一列来排序。 null
sortOrder string 定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。 asc
remoteSort boolean 定义是否通过远程服务器对数据排序。 true
showFooter boolean 定义是否显示行底（如果是做统计表格，这里可以显示总计等）。 false
rowStyler function 返回样式，如：'background:red'，function有2个参数：
index：行索引，从0开始.
row：对应于该行记录的对象。

示例:

$('#dg').datagrid({

	rowStyler: function(index,row){

		if (row.listprice>80){

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

		}

	}

});
 
loader function 定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数：
param: 参数对象传递到远程服务器。
success(data): 回调函数将被调用成功检索的数据。
error():回调函数将被调用失败时检索数据。		 json loader
loadFilter function 返回过滤的数据显示。该函数需要一个参数'data'，表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。

示例:

// removing 'd' object from asp.net web service json output

$('#dg').datagrid({

	loadFilter: function(data){

		if (data.d){

			return data.d;

		} else {

			return data;

		}

	}

});
 
editors object 定义当编辑一行时的编辑模式。 predefined editors
view object 定义数据表格的视图。 default view

列属性（Column Properties）

数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。

示例:

  1. columns:[[
  2. {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
  3. {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
  4. {title:'Item Details',colspan:4}
  5. ],[
  6. {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
  7. {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
  8. {field:'attr1',title:'Attribute',width:100},
  9. {field:'status',title:'Status',width:60}
  10. ]]

columns:[[
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
{title:'Item Details',colspan:4}
],[
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]

名称 类型 描述 默认值
title string 列标题。 undefined
field string 列字段。 undefined
width number 列宽。 undefined
rowspan number 表明一个单元格跨几行。 undefined
colspan number 表明一个单元格跨几列。 undefined
align string 表明如何对其列数据，可选值：'left'，'right'，'center'。 undefined
sortable boolean 设置为true允许对该列排序。 undefined
resizable boolean 设置为true允许该列被缩放。 undefined
hidden boolean 设置为true将隐藏列。 undefined
checkbox boolean 设置为true将显示复选框。 undefined
formatter function 格式化单元格函数，有3个参数：
value：字段的值。
rowData：行数据。
rowIndex：行索引。

示例:

$('#dg').datagrid({

	columns:[[

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

			formatter: function(value,row,index){

				if (row.user){

					return row.user.name;

				} else {

					return value;

				}

			}

		}

	]]

});
undefined
styler function 单元格样式函数，返回样式字符串装饰表格如'background:red'，function有3个参数：
value：字段值。
rowData：行数据。
rowIndex：行索引。

示例:

$('#dg').datagrid({

	columns:[[

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

			styler: function(value,row,index){

				if (value < 20){

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

				}

			}

		}

	]]

});
undefined
sorter function T自定义字段排序函数，有2个参数：
a：该列的第一个值。
b：该列的第二个值。

示例:

$('#dg').datagrid({

	remoteSort: false,

	columns: [[

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

			sorter:function(a,b){

				a = a.split('/');

				b = b.split('/');

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

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

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

					} else {

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

					}

				} else {

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

				}

			}

		}

	]]

});
undefined
editor string,object 表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数：
type：字符串，编辑类型，可选值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。
options：对象，对象于编辑类型的编辑器属性。		 undefined

编辑器（Editor）

使用$.fn.datagrid.defaults.editors重载默认值。

每个编辑器都有以下方法:

名称 属性 描述
init container, options 初始化编辑器并返回目标对象。
destroy target 注销编辑器。
getValue target 获取编辑框的值。
setValue target , value 设置编辑框的值。
resize target , width 调整编辑器

如下代码将定义一个文本编辑器:

  1. $.extend($.fn.datagrid.defaults.editors, {
  2. text: {
  3. init: function(container, options){
  4. var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
  5. return input;
  6. },
  7. getValue: function(target){
  8. return $(target).val();
  9. },
  10. setValue: function(target, value){
  11. $(target).val(value);
  12. },
  13. resize: function(target, width){
  14. var input = $(target);
  15. if ($.boxModel == true){
  16. input.width(width - (input.outerWidth() - input.width()));
  17. } else {
  18. input.width(width);
  19. }
  20. }
  21. }
  22. });

$.extend($.fn.datagrid.defaults.editors, {
text: {
init: function(container, options){
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
return input;
},
getValue: function(target){
return $(target).val();
},
setValue: function(target, value){
$(target).val(value);
},
resize: function(target, width){
var input = $(target);
if ($.boxModel == true){
input.width(width - (input.outerWidth() - input.width()));
} else {
input.width(width);
}
}
}
});

数据表格视图（DataGrid View）

使用$.fn.datagrid.defaults.view重载默认值。

视图是一个告诉数据表格如何呈现行记录的对象，对象必须定义以下方法:

名称 属性 描述
render target, container, frozen 当数据载入时调用。
target: DOM对象，数据网格对象。
container: 行记录容器。
frozen: 是否呈现固定容器。
renderFooter target, container, frozen 这是一个可选函数用以展现行底。
renderRow target, fields, frozen, rowIndex, rowData 这是一个可选函数，它可以被render函数调用。
refreshRow target, rowIndex 定义如何刷新指定的行。
onBeforeRender target, rows 在视图被呈现之前触发。
onAfterRender target 在视图被程序之后触发。

事件（Events）

事件继承控制面板，以下是数据表格独有的属性。

名称 属性 描述
onLoadSuccess data 当数据载入成功时触发。
onLoadError none 当载入远程数据发生错误时触发。
onBeforeLoad param 在请求载入数据之前触发，如果返回false将取消载入。
onClickRow rowIndex, rowData 当用户点击行时触发，参数如下：
rowIndex：被点击的行索引，从0开始。
rowData：对应于被点击的行的记录。
onDblClickRow rowIndex, rowData 当用户双击一行时触发，参数如下：
rowIndex：被点击的行索引，从0开始。
rowData：对应于被点击的行的记录。
onClickCell rowIndex, field, value 当用户点击单元格时触发。
onDblClickCell rowIndex, field, value 当用户双击单元格时触发。

示例:

// when double click a cell, begin editing and make the editor get focus

$('#dg').datagrid({

	onDblClickCell: function(index,field,value){

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

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

		$(ed.target).focus();

	}

});
onSortColumn sort, order 当用户对列排序时触发，参数如下：
sort：排序字段名称。
order：排序顺序。
onResizeColumn field, width 当用户调整列宽时触发。
onSelect rowIndex, rowData 当用户选择一行是触发，参数如下：
rowIndex：被选择的行索引，从0开始。
rowData：对应于被选择行的记录。
onUnselect rowIndex, rowData 当用户取消选择一行时触发，参数如下：
rowIndex：被取消选择的行索引，从0开始。
rowData：对应于被取消选择行的记录。
onSelectAll rows 当用户选择所有行时触发。
onUnselectAll rows 当用户取消选择所有行时触发。
onCheck rowIndex,rowData 当用户选中行时触发，参数包含：
rowIndex：选中行的索引，从0开始
rowData：选中的行对应的记录
此属性是1.3版本。
onUncheck rowIndex,rowData 当用户取消选中行时触发，参数包含：
rowIndex：取消选中行的索引，从0开始
rowData：未经检查的行对应的记录
此属性是1.3版本。
onCheckAll rows 当用户检查所有行时触发。此属性是1.3版本。
onUncheckAll rows 用户取消所有行时触发。此属性是1.3版本。
onBeforeEdit rowIndex, rowData 当用户开始编辑一行时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
onAfterEdit rowIndex, rowData, changes 当用户编辑完成时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
changes：被改变的字段内容，对应方式为字段：值。
onCancelEdit rowIndex, rowData 当用户取消编辑行时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
onHeaderContextMenu e, field 当数据表格的列标题被鼠标右键单击时触发。
onRowContextMenu e, rowIndex, rowData 当一行被鼠标右键单击时触发。

方法（Methods）

名称 属性 描述
options none 返回属性对象。
getPager none 返回页面对象。
getPanel none 返回控制面板对象。
getColumnFields frozen 返回列字段，如果设置了frozen属性为true，将返回固定列的字段名。
示例:

var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns

var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
getColumnOption field 返回特定的列属性。
resize param 缩放和布局。
load param 载入并显示第一页的记录，如果传递了'param'参数，它将会覆盖查询参数属性的值。通过传递一些参数，通常做一个查询，这个方法可以被称为从服务器加载新数据。

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

	code: '01',

	name: 'name01'

});
reload param 重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。
reloadFooter footer 重载行底记录。 示例:

// update footer row values and then refresh

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

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

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

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

// update footer rows with new data

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

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

	{name: 'name2', salary: 65000}

]);
loading none 显示载入状态。
loaded none 隐藏载入状态。
fitColumns none 让列宽自动适应数据表格的宽度。
fixColumnSize field 固定列尺寸。如果“field' 参数未指定，将所有列的大小固定。

示例:

$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size

$('#dg').datagrid('fixColumnSize');  // fix all columns size
fixRowHeight index 固定特定列的高度。如果“index' 参数未指定，将所有列的高度固定。
autoSizeColumn field 自动调整列宽，以适应内容。此方法是1.3版本特有的。
loadData data 载入本地数据，旧记录将被移除。
getData none 返回已载入数据。
getRows none 返回当前页的记录。
getFooterRows none 返回行底记录。
getRowIndex row 返回指定行的索引，row参数可以是行记录或者是一个id字段的值。
getChecked none 返回所有行的复选框已被选中。此方法是1.3版本特有的。
getSelected none 返回第一个被选择的行记录或null。
getSelections none 返回所有被选择的行，当没有记录被选择时，将返回一个空数组。
clearSelections none 取消所有的已选择项。
selectAll none 选择所有页面的行。
unselectAll none 取消选择所有页面的行。
selectRow index 选择一行，行索引从0开始。
selectRecord idValue 通过传递id参数来选择一行。
unselectRow index 取消选择一行。
checkAll none 检查所有页面的行。此方法是1.3版本特有的。
uncheckAll none 取消检查所有当前页面的行。此方法是1.3版本特有的。
checkRow index 检查行，行索引从0开始。此方法是1.3版本特有的。
uncheckRow index 取消检查行，行索引从0开始。此方法是1.3版本特有的。
beginEdit index 开始编辑一行。
endEdit index 结束编辑。
cancelEdit index 取消编辑。
getEditors index 获取指定行的编辑器，每个编辑器有如下属性：
actions：编辑器可以做的行为。
target：目标编辑器jQuery对象。
field：字段名。
type：编辑器类型。
getEditor options 获取特定的编辑器，options参数有2个属性：
index：行索引。
field:字段名。

示例:

// get the datebox editor and change its value

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

$(ed.target).datebox('setValue', '5/4/2012');
refreshRow index 刷新一行。
validateRow index 校验指定的行，如果有效返回true。
updateRow param 更新指定的行，param参数包含如下属性：
index：要更新的行索引。
row：新的行数据。

示例:

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

	index: 2,

	row: {

		name: 'new name',

		note: 'new note message'

	}

});
appendRow row 添加一行。 新的行会被添加到最后一个位置:

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

	name: 'new name',

	age: 30,

	note: 'some messages'

});
insertRow param
插入一个新行，param参数包含如下属性：
index：要插入的行索引，如果没有定义则在最后面添加一个新行。
row：行数据。
示例: 
// insert a new row at second row position

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

	index: 1,	// index start with 0

	row: {

		name: 'new name',

		age: 30,

		note: 'some messages'

	}

});
deleteRow index 删除一行。
getChanges type 获取从最后一次提交开始的被修改的所有行，type参数表明修改的类型，可选值：inserted，deleted，updated等 。当没有传递type参数时，返回所有被修改的行。
acceptChanges none 提交所有修改的数据，提交后的数据将不能再修改或者回滚。
rejectChanges none 回滚自创建以来或自上次调用AcceptChanges，所有的变化数据。
mergeCells options 合并单元格，options参数包含如下属性：
index：行索引。
field：字段名。
rowspan：整合单元格要跨的行数。
colspan：整合单元格要跨的列数。
showColumn field 显示特定的列。
hideColumn field 隐藏特定的列。 
  1     /////////////////////////////////////////////

  2         //初始化数据

  3     function initGrid()

  4         {

  5             $('#grid').datagrid({

  6                 width:'100%',

  7                 height:'auto',

  8                 nowrap: true,

  9                 striped: true,

 10                 fitColumns:false,

 11                 url:'${contextPath}/cardGift/cardGift.do?method=getCardGiftList&activeId=${information.cardGiftActive.activeId}',

 12                 queryParams:queryParam,

 13                 remoteSort:false,

 14                 //Grid对应的主键列

 15                 idField:'',

 16                 singleSelect:true,

 17                 columns:[[

 18                         {field:'serial',title:'',width:15,checkbox:true},

 19                         {field:'activeName',title:'活动名称',width:50,sortable:true},

 20                         {field:'giftGoodId',title:'赠品商品编码',width:80},

 21                         {field:'goodsName',title:'商品名称',width:120},

 22                         {field:'giftCodeTotal',title:'赠品码生成数量',width:100},

 23                         {field:'genCodeNumber',title:'已生成赠品码数量',width:100},

 24                         {field:'startTime',title:'赠品发放起始时间',width:125},

 25                         {field:'endTime',title:'赠品发放结束时间',width:125},

 26                         {field:'memo',title:'备注',width:120}

 27                 ]],

 28                 pagination:true,

 29                 rownumbers:true,

 30                 toolbar:[

 31                 '-',{

 32                     id:'btnClearSelections',

 33                     text:'修改活动商品',

 34                     iconCls:'icon-edit',

 35                     handler:function(){

 36                         editData();

 37                     }

 38                 },'-',{

 39                     id:'btnDel',

 40                     text:'删除活动商品',

 41                     iconCls:'icon-no',

 42                     handler:function(){

 43                         deleteData();

 44                     }

 45                 },

 46                 '-',{

 47                     id:'btnClearSelections',

 48                     text:'清除选择',

 49                     iconCls:'icon-cut',

 50                     handler:function(){

 51                         $('#grid').datagrid('clearSelections');

 52                         //设置选中值

 53                         document.addForm.reset();

 54                         $('#giftCodeTotal').val("0");

 55                         $('#memoData').html("");

 56                         $('#submitBtn').html("确认提交");

 57                         $('#submitBtn').attr('onclick',"addSubmit('insert');");

 58                     }

 59                 }],

 60                 onLoadError:function(){

 61                     XW_dialog.alert('','加载数据失败！');

 62                 }

 63

 64             });

 65

 66             //设置分页控件

 67             var p = $('#grid').datagrid('getPager');

 68             $(p).pagination(PAGE_TEMPLATE);

 69         }

 70

 71

 72         function editData(){

 73             var row = $('#grid').datagrid("getSelections");

 74             if($(row).length < 1 || $(row).length > 1)

 75             {

 76                 XW_dialog.alert('',"请选择要查看的记录，只能选取单行！");

 77                 return ;

 78             }

 79             //设置默认选中

 80             $('#goodsSelect').combogrid('grid').datagrid('selectRecord',row[0].giftGoodId);

 81             $('#goodsSelect').hide();

 82             //设置选中值

 83             $('#giftCodeTotal').val(row[0].giftCodeTotal);

 84             $('#memoData').html(row[0].memo);

 85             $('#submitBtn').html("更新");

 86             $('#submitBtn').attr('onclick',"addSubmit('update');");

 87             $('#resetBtn').hide();

 88

 89         }

 90

 91

 92         function deleteData(){

 93         var data = $('#grid').datagrid("getSelections");

 94         //删除

 95         var delurl = "${contextPath}/cardGift/cardGift.do?method=deleteCardGift&activeId="+data[0].activeId+"&giftGoodId="+data[0].giftGoodId;

 96         //发送删除请求

 97         $.ajax({

 98            type: "POST",

 99            dataType:'json',

100            url: delurl,

101            success: function(msg){

102              if(msg.success)

103                 {

104                     //保存回调函数使用的数据

105                     XW_dialog.addData('callbackData',msg.map);

106                     //删除成功

107                     XW_dialog.tips(msg.errorMsg, 3);

108                     deleteCallBack();

109                 }

110                 else

111                 {

112                     XW_dialog.alert('',msg.errorMsg);

113                 }

114            }

115     });

116 }

117

118

119         //删除记录回调函数，默认调用刷新记录方法，

120         function deleteCallBack(){

121             reloadGrid("grid");

122         }

123

JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单的更多相关文章

  1. JQuery Easy Ui dataGrid 数据表格

    数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...

  2. JQuery Easy Ui dataGrid 数据表格 -->转

    转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容 概况 使用方法 ...

  3. jquery Easy UI Datagrid(数据网格)学习心德，附API

    第一步,引入主要的css样式和js文件 <meta http-equiv="Content-Type" content="text/html; charset=ut ...

  4. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  5. 向DataGrid数据表格增加查询搜索框

    向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext. ...

  6. jquery插件制作，下拉菜单

    要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...

  7. Excel应用----制作二级下拉菜单【转】

    应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...

  8. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  9. 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

随机推荐

  1. Linux Shell编程（6）——变量替换

    变量的名字是它的值保存的地方.引用它的值称为变量替换.$让我们仔细地区别变量和变量的值.如果variable1是一个变量的名字,那么$variable1就是引用这个变量的值――即这个变量它包含的数据. ...

  2. 数据结构(Splay平衡树)：HDU 1890 Robotic Sort

    Robotic Sort Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  3. QTP自传之对象库编程

    对象库编程是我们平时工作中使用最多的编程方式,在自动化脚本开发中起到举足轻重的作用,与描述性性编程相比,更直接和易于维护,今天就和大家简单的聊聊如何进行对象库编程. 既然是对象库编程,肯定要对已存在于 ...

  4. 数据结构——N皇后放置方法种数

    Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...

  5. ARM机器码分析

    我们编写的汇编程序还是不够底层,CPU都是对机器码进行操作的,所以还需要用汇编器将汇编代码转换成机器码才能被CPU处理.下面举几个例子来说说分析ARM机器码的方法. 对编译连接之后得到的ELF进行反汇 ...

  6. SRM 597

    我果然是题短了就能做得好- -.Div 2的三道题都短,于是迅速的过掉了250和500,rating涨了150^ ^. Div 2 250pt 题意:给一个vector<int> A,对其 ...

  7. The game of life（生命游戏）新算法

    我写了一种常见的实现算法,和另一种新算法,即不是每次循环计算每个细胞的周围细胞数来产生下一时刻,而是每次每个产生状态变化的细胞主动通知周围的邻居,因此每个细胞增加一个用来记录邻居数的字段.由邻居数决定 ...

  8. Unable to locate the Javac Compiler 解决办法

    在使用eclipse对maven项目进行编译打包(Run As->Maven install)时,报以下错误:[ERROR] Failed to execute goal org.apache. ...

  9. 【protobuf进阶】读取proto实体里的extensionObject对象的方法

    //设置扩展对象 ProtoBuf.Extensible.AppendValue //读取扩展对象 ProtoBuf.Extensible.GetValue 最近通过C#的TcpClient调用jav ...

  10. Android ViewPager PagerAdapter 图片轮播

    ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的View类. ViewPager类需要一个PagerAdapter适配器类给它提供数据. ViewPager ...