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

在前端页面我们经常需要多选表格上的一些行去进行删除的批量操作,还有一些状态的改变。但是原有的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;
                });

            });
        }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DataVault善战

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值