展开功能的实现

设置展开部分功能的实现：

 

 

1.首先需要获取点击事件，在所属活动后面加上扩展的代码：

onDblClickRow : function(index, field, value) {

//如果当前未选中行

                 if (editIndex == undefined) {

//将点击的index放在编辑的index中

editIndex = index;

//获取选中的行

$('#dg').datagrid('selectRow', index).datagrid(

'beginEdit', index);

}

},

//设置被打开行的样式

rowStyler : function(index, row) {

if (row.admin == 1) {

return 'background-color:#6293BB;color:#fff;font-weight:bold;';

}

}, view : detailview,

detailFormatter : function(index, row) {

return '<div style="padding:1px"><table class="ddv"></table></div>';

},

onExpandRow : function(index, row) {

var ddv = $(this).datagrid('getRowDetail', index)

.find('table.ddv');

ddv

.datagrid({

url : '../img.do',

fitColumns : true,

singleSelect : true,

rownumbers : true,

 

loadMsg : '',

queryParams : {

method : 'select',

gid : row.id

},

height : 'auto',

columns : [ [

{

field : 'id',

title : '序号',

width : 100

},

{

field : 'smallimg',

title : '小图',

width : 100,

align : 'center',

formatter : function(value,row, index) {

var flag = true;

if(flag){

return value= "<img src=\"../uploads/"+row.smallImg+"\" width=\"100px\" height=\"60px\" alt=\"活动尚未开始！！！\" />";

}else{

return value = "已下架商品！！"

}

return value;

},

},

{

field : 'midimg',

title : '中图',

width : 100,

align : 'center',

formatter : function(value,

row, index) {

var flag = true;

if(flag){

return value= "<img src=\"../uploads/"+row.midImg+"\" width=\"100px\" height=\"60px\" alt=\"活动尚未开始！！！\" />";

}else{

return value = "已下架商品！！"

}

return value;

},

},

{

field : 'bigimg',

title : '大图',

width : 100,

align : 'center',

formatter : function(value,

row, index) {

if(row.bigImg){

return value= "<img src=\"../uploads/"+row.bigImg+"\" width=\"100px\" height=\"60px\" alt=\"活动尚未开始！！！\" />";

}else{

return value = "已下架商品！！"

}

return value;

},

},

{

field : 'opt',

title : '操作设置',

width : 100,

align : 'right',

formatter : function(value,

row, index) {

var temp = "";

if (row.interpor == 0) {

temp = "<a class=\"easyui-linkbutton l-btn l-btn-small easyui-fluid\" style=\"width: 105px;\" href=\"javascript:setInterpor("

+ row.id

+ ")\" data-options=\"iconCls:'icon-add'\" group=\"\"><span class=\"l-btn-left l-btn-icon-left\" style=\"margin-top: 0px;\">"

+ "<span class=\"l-btn-text\">设置</span><span class=\"l-btn-icon icon-add\"> </span></span></a>";

} else {

temp = "<a class=\"easyui-linkbutton l-btn l-btn-small easyui-fluid\" style=\"width: 105px;\" href=\"javascript:setInterpor("

+ row.id

+ ")\" data-options=\"iconCls:'icon-add'\" group=\"\"><span class=\"l-btn-left l-btn-icon-left\" style=\"margin-top: 0px;\">"

+ "<span class=\"l-btn-text\">取消</span><span class=\"l-btn-icon icon-add\"> </span></span></a>";

}

return temp;

}

} ] ],

onResize : function() {

$('#dg')

.datagrid(

'fixDetailRowHeight',

index);

},

onLoadSuccess : function() {

setTimeout(function() {

$('#dg').datagrid(

'fixDetailRowHeight',

index);

}, 0);

}

});

$('#dg').datagrid('fixDetailRowHeight', index);

}

})

 

注意点：需要在jsp页面引入datagrid的js，如下