自定义按钮需要用到自定义列,因为是在自定义列中设计自定义按钮。自定义也就是自己设计的,在渲染表格的时候就必须要写好自定义列,然后在渲染表格时一起渲染,然后再写自定义的按钮。
点击自定义按钮跳转页面并回填数据大多数都是跳转页面修改信息所需要的一个小功能。可能会常常用到,所以今天就说一下这个小功能!
首先渲染表格时把自定义列写上,如下图的操作列:
图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的操作列中像笔的那个图标相当于一个按钮,点击它就会跳转页面。由于跳转之后的页面太大,截图太多就不放在这里了。如果想看效果的话可以来找我,或者自己写一下然后看效果,会有意想不到的收获哦!
如果我有什么地方写的不对或者有其他意见的请联系我或者在评论区评论,我会留意和更改的!