您所在的IP地址对ITeye网站访问过于频繁，为了判断您的访问是真实用户，请您填写验证码，谢谢！&&&&&&&&&&&
/// 最近一次使用编辑行 一切正常
///&summary&
///初始化数据容器
///&/summary&
function InitGrid(){
$("#grid").datagrid({
loadMsg:'数据加载中,请稍后......',
border:false,
fitColumns:true,
remoteSort:false,
onDblClickRow:function(rowIndex,rowData){
lastIndex=rowI
$("#grid").datagrid('endEdit',rowIndex);
$("#grid").datagrid('beginEdit',rowIndex);
var oldordering = rowData.
$("input.datagrid-editable-input").val(oldordering).bind("blur",function(evt){
setOrder($(this).val(),eval("rowData."+actid));
$("#grid").datagrid('endEdit',lastIndex);
}).bind("keypress",function(evt){
if(evt.keyCode==13){
setOrder($(this).val(),eval("rowData."+actid));
$("#grid").datagrid('endEdit',lastIndex);
}).focus();
lastIndex=rowI
frozenColumns:[[
{field:'ck',checkbox:true}
{text:'刷新',iconCls:'icon-reload',handler:function(){
{text:'添加',iconCls:'icon-add',handler:add},
{text:'编辑',iconCls:'icon-edit',handler:edit},
{text:'删除',iconCls:'icon-cut',handler:del},
{text:'清选',iconCls:'icon-undo',handler:function(){
$("#grid").datagrid("clearSelections");
columns:[[
{field:actid,title:'序号',width:17,align:'center',sortable:true,sorter:sortId},
{field:'jobName',title:'招骋职位',width:40,align:'center',sortable:true},
{field:'jobKind',title:'类型',width:60,align:'center',sortable:true},
{field:'requireNum',title:'人数',width:12,align:'center',sortable:true},
{field:'email',title:'邮箱',width:34,align:'center',sortable:true},
{field:'ordering',title:'排序',width:10,align:'center',sortable:true,editor:{type:'numberbox'}},
{field:'lastTime',title:'截止时间',width:40,align:'center',sortable:true},
{field:'act',title:'操作',width:40,align:'center',formatter:act}
&以前使用方式
///&summary&
///初始化数据容器
///&/summary&
function InitGrid(){
$("#grid").datagrid({
loadMsg:'数据加载中,请稍后......',
border:false,
fitColumns:true,
remoteSort:false,
//双击变有可编辑状态
onDblClickRow:function(rowIndex,rowData){
var oldnum = rowData.g_
//if(lastIndex!=rowIndex){
$("#grid").datagrid('endEdit',rowIndex);
$("#grid").datagrid('beginEdit',rowIndex);
var num = rowData.g_
$("input.datagrid-editable-input").val("+");
$("input.datagrid-editable-input").bind("blur",function(evt){
var input = $(this).val()?eval($(this).val()):0;
var result = SetNum(input,rowData.id,oldnum);
var item = result.split("||");
$(this).val(item[1]);
$("#grid").datagrid('endEdit',lastIndex);
$("input.datagrid-editable-input").bind("keypress",function(evt){
if(evt.keyCode==13){
var input = $(this).val()?$(this).val():0;
var result = SetNum(input,rowData.id,oldnum);
var item = result.split("||");
$(this).val(item[1]);
$("#grid").datagrid('endEdit',lastIndex);
lastIndex=rowI
frozenColumns:[[
{field:'ck',checkbox:true}
{text:'刷新',iconCls:'icon-reload',handler:function(){
{text:'添加',iconCls:'icon-add',handler:add},
{text:'编辑',iconCls:'icon-edit',handler:edit},
{text:'删除',iconCls:'icon-cut',handler:del},
{text:'清选',iconCls:'icon-undo',handler:function(){
$("#grid").datagrid("clearSelections");
columns:[[
{field:'id',title:'序号',width:40,align:'center',sortable:true,sorter:sortId},
{field:'g_name',title:'商品名称',width:40,align:'center',sortable:true},
{field:'gt_name',title:'所属类型',width:40,align:'center',sortable:true},
{field:'g_num',title:'库存',width:40,align:'center',sortable:true,editor:{type:'numberbox'}},
{field:'g_isnew',title:'是否新品',width:40,align:'center',sortable:true,formatter:function(val){
return val=='1'?'是':'否';
{field:'g_ishot',title:'是否热品',width:40,align:'center',sortable:true,formatter:function(val){
return val=='1'?'是':'否';
{field:'g_status',title:'状态',width:40,align:'center',sortable:true,formatter:status},
{field:'g_addtime',title:'添加时间',width:40,align:'center',sortable:true},
{field:'act',title:'操作',width:40,align:'center',formatter:act}
///&summary&
///Ajax获取分页数据
///currPage =& 当前页码
///&/summary&
function GetData(currPage){
var pageSize = getPageSize();// 15;
var where=$("#where").val();
var levels=$("#pt").val();
url:url+'/AjaxData',
type:'post',
dataType:'text',
data:'currPage='+currPage+'&pageSize='+pageSize+''+'&where='+where+'&pt='+levels,
beforeSend:function(){
$("#grid").datagrid("loading");
success:function(json){
$("#grid").datagrid("loaded");
json=decodeURIComponent(json);
if(json.length&=20){
$("#grid").datagrid("loadData",{total:0,rows:[]});
json = eval('('+json+')');
$("#grid").datagrid("loadData",json);
$("#currPage").val(currPage);
$("#pageCount").val(Math.ceil(json.total/pageSize));
$("#pageStr").html(ShortPageStr(json.total));
ShowPageBar();
error:function(data){
alert(data.responseText);
///&summary&
///@desc 修改库存(出入库)
///&/summary&
function SetNum(count,id,oldnum){
var result = 'error||'+
url:url+'/SetNum',
type:'post',
dataType:'text',
data:'count='+count+'&sx='+id,
async:false,
success:function(data){
error:function(data){
result='error||'+
阅读(...) 评论()用户名：wwjava
文章数：10
访问量：1905
注册日期：
阅读量：1297
阅读量：3317
阅读量：582470
阅读量：467240
51CTO推荐博文
数据表格继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。依赖关系控制面板缩放链接按钮分页使用方法id=&tt&$('#tt').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'} & & &]] &}); &数据表格属性属性继承控制面板，以下是数据表格独有的属性。名称类型描述默认值columns（列）array（数组）数据表格列配置对象，查看列属性以获取更多细节。nullfrozenColumns（固定列）array（数组）跟列属性一样，但是这些列固定在左边，不会滚动。nullfitColumns（自适应列宽）boolean（布尔型）设置为true将自动使列适应表格宽度以防止出现水平滚动。falsestriped（显示条纹）boolean（布尔型）设置为true将交替显示行背景。falsemethod（方法）string（字符串）请求远程数据的方法类型。postnowrap（截取）boolean（布尔型）设置为true，当数据长度超出列宽时将会自动截取。trueidField（id字段）string（字符串）表明该列是一个唯一列。nullurl（超链接）string（字符串）一个用以从远程站点请求数据的超链接地址。nullloadMsg（载入时信息）string（字符串）当从远程站点载入数据时，显示的一条快捷信息。Processing, please wait …pagination（分页）boolean（布尔型）设置true将在数据表格底部显示分页工具栏。falserownumbers（行数）boolean（布尔型）设置为true将显示行数。falsesingleSelect（单选模式）boolean（布尔型）设置为true将只允许选择一行。falsepageNumber（当前页码）number（数字）当设置分页属性时，初始化分页码。1pageSize（每页记录数）number（数字）当设置分页属性时，初始化每页记录数。10pageList（可选择的每页记录数）array当设置分页属性时，初始化每页记录数列表。[10,20,30,40,50]queryParams（查询参数）object（对象）当请求远程数据时，发送的额外参数。{}sortName（默认排序）string（字符串）当数据表格初始化时以哪一列来排序。nullsortOrder（排序顺序）string（字符串）定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。ascremoteSort（远程排序）boolean（布尔型）定义是否通过远程服务器对数据排序。trueshowFooter（显示行底）boolean（布尔型）定义是否显示行底（如果是做统计表格，这里可以显示总计等）。falserowStyler（行样式）function（函数）返回样式，如：'red'，function有2个参数：index：行索引，从0开始.row：对应于该行记录的对象。loadFilter（载入过滤器）function（函数）返回用以显示的已过滤数据，function有一个参数'data'表示原始数据，你可以将原始数据改变为规范的数据格式，该函数必须返回包含 'total'和'rows'属性的标准数据对象。editors（编辑模式）object（对象）定义当编辑一行时的编辑模式。predefined editorsview（视图）object（对象）定义数据表格的视图。default view列属性数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。示例代码: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（字符串）列标题。undefinedfield（字段）string（字符串）列字段。undefinedwidth（宽度）number（数字）列宽。undefinedrowspan（跨行数）number（数字）表明一个单元格跨几行。undefinedcolspan（跨列数）number（数字）表明一个单元格跨几列。undefinedalign（对其方式）string（字符串）表明如何对其列数据，可选值：'left'，'right'，'center'。undefinedsortable（可排序）boolean（布尔型）设置为true允许对该列排序。undefinedresizable（缩放）boolean（布尔型）设置为true允许该列被缩放。undefinedhidden（隐藏）boolean（布尔型）设置为true将隐藏列。undefinedcheckbox（复选框）boolean（布尔型）设置为true将显示复选框。undefinedformatter（格式化）function（函数）格式化单元格函数，有3个参数：value：字段的值。rowData：行数据。rowIndex：行索引。undefinedstyler（样式）function（函数）单元格样式函数，返回样式字符串装饰表格如'red'，function有3个参数：value：字段值。rowData：行数据。rowIndex：行索引。undefinedsorter（排序器）function（函数）T自定义字段排序函数，有2个参数：a：该列的第一个值。b：该列的第二个值。undefinededitor（编辑器）string,object（字符串，对象）表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数：type：字符串，编辑类型，可选值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。options：对象，对象于编辑类型的编辑器属性。undefined编辑器使用$.fn.datagrid.defaults.editors重载默认值。每个编辑器都有以下方法：名称参数描述initcontainer, options初始化编辑器并返回目标对象。destroytarget销毁编辑器。getValuetarget获取编辑框的值。setValuetarget , value设置编辑框的值。resizetarget , width调整编辑器例如，如下代码将定义一个文本编辑器：$.extend($.fn.datagrid.defaults.editors, { & & &text: { & & & & &init: function(container, options){ &var input = $('&input type=&text& class=&datagrid-editable-input&&').appendTo(container); &return & & & & &}, & & & & &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); & & & & & & &} & & & & &} & & &} &}); &数据表格视图使用$.fn.datagrid.defaults.view重载默认值。视图是一个告诉数据表格如何呈现行记录的对象，对象必须定义以下方法：名称参数描述rendertarget, container, frozen当数据载入时调用。target: DOM对象，数据网格对象。container: 行记录容器。frozen: 是否呈现固定容器。renderFootertarget, container, frozen这是一个可选函数用以展现行底。renderRowtarget, fields, frozen, rowIndex, rowData这是一个可选函数，它可以被render函数调用。refreshRowtarget, rowIndex定义如何刷新指定的行。onBeforeRendertarget, rows在视图被呈现之前触发。onAfterRendertarget在视图被程序之后触发。事件事件继承控制面板，以下是数据表格独有的属性。名称参数描述onLoadSuccessdata当数据载入成功时触发。onLoadErrornone当载入远程数据发生错误时触发。onBeforeLoadparam在请求载入数据之前触发，如果返回false将取消载入。onClickRowrowIndex, rowData当用户点击行时触发，参数如下：rowIndex：被点击的行索引，从0开始。rowData：对应于被点击的行的记录。onDblClickRowrowIndex, rowData当用户双击一行时触发，参数如下：rowIndex：被点击的行索引，从0开始。rowData：对应于被点击的行的记录。onClickCellrowIndex, field, value当用户点击单元格时触发。onDblClickCellrowIndex, field, value当用户双击单元格时触发。onSortColumnsort, order当用户对列排序时触发，参数如下：sort：排序字段名称。order：排序顺序。onResizeColumnfield, width当用户调整列宽时触发。onSelectrowIndex, rowData当用户选择一行是触发，参数如下：rowIndex：被选择的行索引，从0开始。rowData：对应于被选择行的记录。onUnselectrowIndex, rowData当用户取消选择一行时触发，参数如下：rowIndex：被取消选择的行索引，从0开始。rowData：对应于被取消选择行的记录。onSelectAllrows当用户选择所有行时触发。onUnselectAllrows当用户取消选择所有行时触发。onBeforeEditrowIndex, rowData当用户开始编辑一行时触发，参数如下：rowIndex：正在编辑的行索引，从0开始。rowData：对应于正在编辑的行的记录。onAfterEditrowIndex, rowData, changes当用户编辑完成时触发，参数如下：rowIndex：正在编辑的行索引，从0开始。rowData：对应于正在编辑的行的记录。changes：被改变的字段内容，对应方式为字段：值。onCancelEditrowIndex, rowData当用户取消编辑行时触发，参数如下：rowIndex：正在编辑的行索引，从0开始。rowData：对应于正在编辑的行的记录。onHeaderContextMenue, field当数据表格的列标题被鼠标右键单击时触发。onRowContextMenue, rowIndex, rowData当一行被鼠标右键单击时触发。方法名称参数描述optionsnone返回属性对象。getPagernone返回页面对象。getPanelnone返回控制面板对象。getColumnFieldsfrozen返回列字段，如果设置了frozen属性为true，将返回固定列的字段名。getColumnOptionfield返回特定的列属性。resizeparam缩放和布局。loadparam载入并显示第一页的记录，如果传递了'param'参数，它将会覆盖查询参数属性的值。reloadparam重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。reloadFooterfooter重载行底记录。loadingnone显示载入状态。loadednone隐藏载入状态。fitColumnsnone让列宽自动适应数据表格的宽度。fixColumnSizenone固定列尺寸。fixRowHeightindex固定特定列的高度。loadDatadata载入本地数据，旧记录将被移除。getDatanone返回已载入数据。getRowsnone返回当前页的记录。getFooterRowsnone返回行底记录。getRowIndexrow返回指定行的索引，row参数可以是行记录或者是一个id字段的值。getSelectednone返回第一个被选择的行记录或null。getSelectionsnone返回所有被选择的行，当没有记录被选择时，将返回一个空数组。clearSelectionsnone取消所有的已选择项。selectAllnone全选。unselectAllnone取消全选。selectRowindex选择一行，行索引从0开始。selectRecordidValue通过传递id参数来选择一行。unselectRowindex取消选择一行。beginEditindex开始编辑一行。endEditindex结束编辑。cancelEditindex取消编辑。getEditorsindex获取指定行的编辑器，每个编辑器有如下属性：actions：编辑器可以做的行为。target：目标编辑器jQuery对象。field：字段名。type：编辑器类型。getEditoroptions获取特定的编辑器，options参数有2个属性：index：行索引。field:字段名。refreshRowindex刷新一行。validateRowindex校验指定的行，如果有效返回true。updateRowparam更新指定的行，param参数包含如下属性：index：要更新的行索引。row：新的行数据。appendRowrow添加一行。insertRowparam插入一个新行，param参数包含如下属性：index：要插入的行索引，如果没有定义则在最后面添加一个新行。row：行数据。deleteRowindex删除一行。getChangestype获取从最后一次提交开始的被修改的所有行，type参数表明修改的类型，可选值：inserted，deleted，updated等 。当没有传递type参数时，返回所有被修改的行。acceptChangesnone提交所有修改的数据，提交后的数据将不能再修改或者回滚。rejectChangesnone回滚所有被删除的行。mergeCellsoptions合并单元格，options参数包含如下属性：index：行索引。field：字段名。rowspan：整合单元格要跨的行数。colspan：整合单元格要跨的列数。showColumnfield显示特定的列。hideColumnfield隐藏特定的列。jQuery EasyUI下载： 详细内容： /documentation/index.php附件下载本文出自 “” 博客，请务必保留此出处
了这篇文章
附件下载：　　
类别：┆阅读(0)┆评论(0)
请输入验证码：源代码&p&本教程将向您展示如何根据一些条件改变数据网格（datagrid）组件的行样式。当 listprice 值大于 50 时，我们将为该行设置不同的颜色。&/p& &img src="/Uploads/images/datagrid18_1.png"/& &p&数据网格（datagrid）的 rowStyler 函数的设计目的是允许您自定义行样式。以下代码展示如何改变行样式：&/p& &pre class="prettyprint linenums"&
&table id="tt" title="DataGrid" style="width:600height:250px"
url="data/datagrid_data.json"
singleSelect="true" fitColumns="true"&
&th field="itemid" width="80"&Item ID&/th&
&th field="productid" width="80"&Product ID&/th&
&th field="listprice" width="80" align="right"&List Price&/th&
&th field="unitcost" width="80" align="right"&Unit Cost&/th&
&th field="attr1" width="150"&Attribute&/th&
&th field="status" width="60" align="center"&Stauts&/th&
&/pre& &pre class="prettyprint linenums"&
$('#tt').datagrid({
rowStyler:function(index,row){
if (row.listprice&50){
return 'background-color:color:font-weight:';
&/pre& &p&正如您所看到的，我们根据一些条件设置 background-color（背景色）为 pink（粉红色），设置文本颜色为 blue（蓝色）。&/p&在学习过程中，可以参照JQuery EasyUI的官方网站学习。地址：
在学习JQuery EasyUI中的DataGrid标签时，可以参照进行学习。
本文主要讲解DataGrid标签的使用，怎么设置参数，怎么向后台请求数据等。
在使用过程中，我使用的是1.4版本，存在一个问题，当请求数据为0行时，会重新请求一次。
这一个问题，园中兄弟帮我解决了，地址是：，感谢
一、在页面中添加标签
@*这是datagrid标签展示的地方，其中iconcls表示datagrid中左上角展示的图标*@
&table id="dg" iconcls="icon-edit"&
@*如果需要弹出层，请参照下边的代码，并在js中做相应的设置*@
&div id="dlg" class="easyui-dialog" title="弹出框标题" style="width: 400 height: 200 padding: 10px"
data-options="
iconCls: 'icon-add',
buttons: [{
text:'确定',
iconCls:'icon-ok',
handler:function(){
//点击'确定'按钮触发的事件
UpdateData();
text:'取消',
handler:function(){
alert('cancel');;
&div class="aaa"&
&span&主键id:&/span&&input type="text" /&
二、在js中添加方法，如下所示：
&script type="text/javascript"&
$(function () {
loadData();
function loadData() {
$('#dg').datagrid({
url: '/Financial/GetLoanDataInfo',//请求方法的地址
title: '信息管理',
width: 900,
height: 400,
fitColumns: true, //列自适应
nowrap: false,//禁止文字自动换行
idField: 'CID',//主键列的列明
loadMsg: '正在加载信息...',//当数据没有加载出来时显示的文字
pagination: true,//是否有分页
singleSelect: true,//是否单行选择
pagePosition: 'bottom',//分页符在底部,可选参数为top，bottom，both
pageSize: 15,//页大小，一页多少条数据
pageNumber: 1,//默认当前的页码
pageList: [15, 30, 50],//一页可显示数据的条目
queryParams: {},//往后台传递参数，json格式
columns: [[
//field表示绑定的字段名，如不绑定就随便写一个；
//checkbox: true表示这一列是checkbox
//hidden: true表示隐藏这一列
//sortable: true表示单击这一列可以排(升/降)序，这样请求数据时会向后台多传输两个参数
{ field: 'ck', checkbox: true, align: 'left', width: 50 },
{ field: 'CID', title: '1', width: 80, align: 'center', hidden: true },
{ field: 'CMoney', title: '2', width: 80, align: 'center', sortable: true },
field: 'CAge', title: '3', width: 80, align: 'center',
//这里表示对显示的信息做处理。value表示原本的值，在方法中对value进行逻辑判断并返回处理后的标签样式
formatter: function (value, row, index) {
//在该函数中，对文本大小判断，如果大于18，显示为红色的字
if (value & 18) {
return '&span style="color:"&' + value + '&/span&';
field: 'CTitle', title: '7', width: 80, align: 'center',
formatter: function (value, row, index) {
//在该函数中，把这一列变为一个a标签。设置class和自定义数据。为下边做准备
return "&a href='javascript:void(0);' data-id='" + row.CID + "' class='detailLink'&" + value + "&/a&";
//绑定数据成功后执行这个方法
onLoadSuccess: function () {
//先把弹出框关闭
$('#dlg').dialog('close');
//添加最后一列的单击事件
$('.detailLink').click(function () {
//获取自定义数据
var id = $(this).data('id');
//为弹出的层中的标签赋值
$('.aaa input').attr('value', id);
$('#dlg').dialog('open');
function UpdateData() {
//点击弹出层的确定按钮触发的事件&&刷新datagrid
$('#dg').datagrid('reload');
三、后端得到datagrid传过去的参数，并返回数据
//在本系统中，datagrid请求的方法需要是Action类型的方法
public ActionResult GetLoanDataInfo()
string sortName = string.E
string order = string.E
//page是datagrid内部实现的，传过来的参数名。表示第几页
if (!int.TryParse(Request.Form["page"], out pageIndex))
pageIndex = 1;
//rows表示这一页显示多少条数据
if (!int.TryParse(Request.Form["rows"], out pageSize))
pageSize = 5;
//sort表示根据那一列排序;order表示升序或者降序,有两个值：asc、desc
if (!string.IsNullOrEmpty(Request.Form["sort"]))
sortName = Request.Form["sort"];
order = Request.Form["order"];
//这一块是从后台请求数据,把上边的参数传进去（本例是模拟的，没有传参数进方法，应该在方法中同时把总数据的条目数out出来）
List&TLoan& list = _DataHelper.GetData();
int totalCount = list.Count();
list = list.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();
//把需要传给前台的数据，分拣出来，赋给rows,这样可以把不需要的数据过滤掉，如果不用过滤数据，可以省略下边一行代码
var rows = from l in list
select new { CID = l.CID, CMoney= l.CMoney, CAge= l.CAge, CTitle= l.CTitle };31
//rows = rows, total = totalCount；等号之前的名字是不可变的，因为是easy ui规定的。
//JsonRequestBehavior.AllowGet表示该方法可以被get方式请求，否则get方式请求得不到数据
return Json(new { rows = rows, total = totalCount }, JsonRequestBehavior.AllowGet);
阅读(...) 评论()