点击自定义按钮跳转页面

自定义按钮需要用到自定义列,因为是在自定义列中设计自定义按钮。自定义也就是自己设计的,在渲染表格的时候就必须要写好自定义列,然后在渲染表格时一起渲染,然后再写自定义的按钮。
点击自定义按钮跳转页面并回填数据大多数都是跳转页面修改信息所需要的一个小功能。可能会常常用到,所以今天就说一下这个小功能!
首先渲染表格时把自定义列写上,如下图的操作列:
在这里插入图片描述
图1
把自定义列渲染后就要写一下自定义按钮的样式了!写自定义列的样式相当于是字段的拼接。拼接完之后就以HTML的格式返回到页面。代码如下表示:

function setOperate(data) {
var SupplierID = data.SupplierID;
var btnHtml = "";
btnHtml += '<button type="button" class="tableButtonArea operate details" style="border-style:hidden;" onclick="openDetail(' + SupplierID + ')"></button>';
btnHtml += '<button type="button" class="tableButtonArea operate edit" style="border-style:hidden;" onclick="openUpdate(' + SupplierID + ')"></button>';
btnHtml += '<button type="button" class="tableButtonArea operate del" style="border-style:hidden;" onclick="doDelete(' + SupplierID + ')">   </button>';
return btnHtml;
}

渲染表格做好了,自定义按钮的样式也写完了,接下来就是把数据查询出来。
如下图所示:
在这里插入图片描述
图2
效果如下图显示:
在这里插入图片描述
图3
在写操作按钮的样式时,我就已经把按钮的点击事件也一起写好了,现在就把跳转页面的代码写出来就可以跳转页面啦!代码如下截图:
在这里插入图片描述
图4
图3的操作列中像笔的那个图标相当于一个按钮,点击它就会跳转页面。由于跳转之后的页面太大,截图太多就不放在这里了。如果想看效果的话可以来找我,或者自己写一下然后看效果,会有意想不到的收获哦!
如果我有什么地方写的不对或者有其他意见的请联系我或者在评论区评论,我会留意和更改的!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值