您的位置:首页 > 产品设计 > UI/UE

DWZ (JUI)表格Table多选selectedTodo功能扩展

2017-05-21 10:06 801 查看
在前端页面我们经常需要多选表格上的一些行去进行删除的批量操作,还有一些状态的改变。但是原有的dwz(JUI)框架只提供了ajax post方式进行提交操作。本人在实际项目中并不需要ajax post提交,希望是执行自定义的js函数,并方便以后项目的灵活使用。

//原本的用法:
//表格每一行的写法
<tr target="xxx" rel="xx" class="selected">
<td ><div><input name="ids" value="1" type="checkbox"></div></td>
</tr>
//触发多选批量操作的写法,可以实现批量删除、批量更新状态等
<a class="delete" href="xxxx/deleteSelects" target="selectedTodo" rel="ids" posttype="string" title="确实要删除这些记录吗?"><span>删除</span></a>


触发的多选操作的js文件是dwz\js\dwz.database.js,内容如下:

selectedTodo: function(){

function _getIds(selectedIds, targetType){
var ids = "";
var $box = targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();
$box.find("input:checked").filter("[name='"+selectedIds+"']").each(function(i){
var val = $(this).val();
ids += i==0 ? val : ","+val;
});
return ids;
}
return this.each(function(){
var $this = $(this);
var selectedIds = $this.attr("rel") || "ids";
var postType = $this.attr("postType") || "map";
var duo = $this.attr("duo") || false;

$this.click(function(){
var ids = _getIds(selectedIds, $this.attr("targetType"));
if (!ids) {
if (!duo) {
alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg"));
return false;
}
}
function _doPost(){
$.ajax({
type:'POST', url:$this.attr('href'), dataType:'json', cache: false,
data: function(){
if (postType == 'map'){
return $.map(ids.split(','), function(val, i) {
return {name: selectedIds, value: val};
})
} else {
var _data = {};
_data[selectedIds] = ids;
return _data;
}
}(),
success: navTabAjaxDone,
error: DWZ.ajaxError
});
}
var title = $this.attr("title");
if (title) {
alertMsg.confirm(title, {okCall: _doPost});
} else {
_doPost();
}
return false;
});

});
}


阅读了上述js,有三个问题。

1、怎么把我们自定义的方法传出来?

给a标签自定义属性way=“func()”,func是自定义的方法

2、怎么触发并传多选的值给自定义的方法(func)?

获取方法名,使用字符串拼接的方式

3、为了不影响原有的功能,怎么扩展?

让a标签的属性postType=“function”,在js里判断执行扩展的功能,并去掉href属性

具体扩展修改后的代码如下:

selectedTodo: function(){

function _getIds(selectedIds, targetType){
var ids = "";
var $box = targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();
$box.find("input:checked").filter("[name='"+selectedIds+"']").each(function(i){
var val = $(this).val();
ids += i==0 ? val : ","+val;
});
return ids;
}
return this.each(function(){
var $this = $(this);
var selectedIds = $this.attr("rel") || "ids";
var postType = $this.attr("postType") || "map";
var duo = $this.attr("duo") || false;
var href=$this.attr('href');

$this.click(function(){
var ids = _getIds(selectedIds, $this.attr("targetType"));
if (!ids) {
if (!duo) {
alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg"));
return false;
}
}
function _doPost(){
$.ajax({
type:'POST', url:$this.attr('href'), dataType:'json', cache: false,
data: function(){
if (postType == 'map'){
return $.map(ids.split(','), function(val, i) {
return {name: selectedIds, value: val};
})
} else {
var _data = {};
_data[selectedIds] = ids;
return _data;
}
}(),
success: navTabAjaxDone,
error: DWZ.ajaxError
});
}
if(postType == 'function'){
var way =$this.attr('way');
var start=way.indexOf('(')+1;
var end=way.indexOf(')')+1;
way=way.substring(0,start)+'\''+ids+'\''+way.substring(start,end);
eval(way);
return false;
}

var title = $this.attr("title");
if (title) {
alertMsg.confirm(title, {okCall: _doPost});
} else {
_doPost();
}
return false;
});

});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  扩展 前端 dwz框架 ajax