展开功能的实现

忘是亡心i 2022-06-17 02:37 162阅读 0赞

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

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，如下

展开功能的实现

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 element Table 展开行功能 (设置点击行可展开功能)

相关 React列表中实现文案多行收起展开的功能

相关页面展开收起php代码,jQuery实现的页面详情展开收起功能示例

相关 php 展开收缩,怎样用JS做出列表展开收缩扩展功能

相关展开功能的实现

相关 eclipse代码折叠展开功能快捷键

相关 antd可展开单元格实现按需可展开

相关 antd可展开单元格实现按需可展开

相关 Vue 实现展开折叠效果

相关 Android TextView 显示部分文本，实现全文/展开和收起功能