DWZ (JUI)表格Table多选selectedTodo功能扩展
2017-05-21 10:06
801 查看
在前端页面我们经常需要多选表格上的一些行去进行删除的批量操作,还有一些状态的改变。但是原有的dwz(JUI)框架只提供了ajax post方式进行提交操作。本人在实际项目中并不需要ajax post提交,希望是执行自定义的js函数,并方便以后项目的灵活使用。
触发的多选操作的js文件是dwz\js\dwz.database.js,内容如下:
阅读了上述js,有三个问题。
1、怎么把我们自定义的方法传出来?
给a标签自定义属性way=“func()”,func是自定义的方法
2、怎么触发并传多选的值给自定义的方法(func)?
获取方法名,使用字符串拼接的方式
3、为了不影响原有的功能,怎么扩展?
让a标签的属性postType=“function”,在js里判断执行扩展的功能,并去掉href属性
具体扩展修改后的代码如下:
//原本的用法: //表格每一行的写法 <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 (JUI)表格Table单击选中功能扩展
- dwz navTab与selectedTodo联合使用
- Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种功能可扩展]
- Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种功能可扩展]
- LINQ to SQL 操作单一表格的Table<TEntity>类
- dwz jui 表格
- to create table if table do not exist -- to backup and restore table in oracle
- 采用Jquery,在table上实现对行的单击、双击、返回选中行数据的功能,可作为GridView控制客户端的扩展
- 在TableViewer中如何给表格的单元格增加其他组件的编辑功能
- 扩展PHP的mbstring功能- Fatal error:Call to undefined function mb_strimwidth
- DWZ (JUI) 403状态扩展
- 采用Jquery,在table上实现对行的单击、双击、返回选中行数据的功能,可作为GridView控制客户端的扩展
- javascript 表格排序和表头浮动效果(扩展SortTable)
- 扩展jquery实现客户端表格的分页、排序功能代码
- C#.NET IEnumerable扩展 ToDataTable/ToPage/ToJson/ForEach/In/Do/Slice
- DWZ (JUI) 教程 DWZ table 分页排序教程
- c# xptable NET中最强,最全功能的表格控件
- table表格的常用功能
- DWZ (JUI) 教程 table 排序