DWZ （JUI）表格Table单击选中功能扩展

本文主要是介绍DWZ （JUI）表格Table单击选中功能扩展，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原本DWZ框架提供的单选功能是单击选中表单上某一记录，点击设置好a标签按钮，URL自动加上记录Id并执行URL，打开新窗口或者ajax提交，可实现对该条记录的更新（删除、修改）。这些功能已经很强大了，但是实际项目还会有更复杂的操作，而不单单是url的请求执行，所以本人就对单击选中功能做了扩展。
先介绍原有的功能，为理解接下来的新扩展提供理论基础。
原有功能html端表现：

//a标签按钮,{xxx_id}大括号里的名称是与表单的tr标签属性target的值是一致的
//表单的tr标签属性rel的值就是该行记录的ID值，也就是{xxx_id}所代表的值
<div class="panelBar"><ul class="toolBar"><li class="">//target="navTab"即打开新的页签，target="dialog"即弹出小窗口，title的值为窗口或页签的名//target="ajaxTodo"即ajax提交，title的值为确认执行的弹框提示内容<a class="edit" href="xxx/xxx?id={xxx_id}" target="navTab" title="xx"><span>修改</span></a></li></ul>
</div>
//可单选的表单
<table >
...
<tbody><tr target="xxx_id" rel="1" ><td >xxx</td>...</tr>           
</tbody>
</table >

原有功能javascript端表现：

//dwz.ui.js文件在大概265行到280行（这边有改动，所以是大概位置）
// navTab$("a[target=navTab]", $p).each(function(){$(this).click(function(event){var $this = $(this);var title = $this.attr("title") || $this.text();var tabid = $this.attr("rel") || "_blank";var fresh = eval($this.attr("fresh") || "true");var external = eval($this.attr("external") || "false");var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));DWZ.debug(url);if (!url.isFinishedTm()) {alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg"));return false;}navTab.openTab(tabid, url,{title:title, fresh:fresh, external:external});event.preventDefault();});});

以上是原有target=”navTab”打开新的页签的功能全部，本人就是以这个为参照，做出更灵活的扩展功能。
以下就是具体实现：
在dwz.ui.js里navTab实现方法之后加如下jq代码（即initUI(_box)方法里）：

//新的单击选中功能，是自定义target="editOne"，并在a标签里自定义属性editOne="youfunc()"实现的
// clickOne$("a[target=editOne]", $p).each(function(){$(this).click(function(event){var $this = $(this);var title = $this.attr("title") || $this.text();//获取editOne属性的值即自定义的js函数var url = unescape($this.attr("editOne")).replaceTmById($(event.target).parents(".unitBox:first"));DWZ.debug(url);if (!url.isFinishedTm()) {alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg"));return false;}//执行自定义的js函数eval(url);event.preventDefault();});});

html的扩展实现：

<a class="edit" editOne="youfunc({xxx_id})" target="editOne"><span>XXX</span></a>

这篇关于DWZ （JUI）表格Table单击选中功能扩展的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---