DWZ (JUI)表格Table多選selectedTodo功能擴充套件
阿新 • • 發佈:2019-02-13
在前端頁面我們經常需要多選表格上的一些行去進行刪除的批量操作,還有一些狀態的改變。但是原有的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;
});
});
}