zoukankan      html  css  js  c++  java
  • div加jquery实现iframe标签的功能

      由于最近项目需要,前端后台都完全采用div+css的方式布局。因而左思右想,有什么办法可以替代常用的iframe上下左右的布局方式,而且页面只是局部刷新。参考了许多前辈的资料,并加以整理,因而有了以下的方法。

      需求:

        1、由于是全局的div+css,由于每次提交的内容都会有所差异。

        2、每个提交都会用到,因而需要一个通用方法。

        3、返回的是html内容,因而需要指定一个显示区域

      因而写一个可复用的方法就显得尤为重要了,因而有了以下的方法。上码:

    /**
     * [btnsubmit 提交url并返回html]
     * @param  {[type]} btnid    [操作ID]
     * @param  {[type]} linkattr [提交url链接]
     * @param  {[type]} disid    [返回内容的显示区域ID]
     * @param  {[type]} prams    [提交参数列表(根据id获取),多个时用"--"分割]
     * @return {[type]}          [description]
     */
    function btnsubmit(btnid, linkattr, disid, prams){
        //console.log('btnid==========' + btnid);
        var $this = $('#' + btnid);
        $this.attr('disabled', 'true');
        $('.pagecontentheader button').attr('disabled', 'true');
        _clickTab = $this.attr(linkattr); // 找到链接a中的targer的值
        
        var prams_data = '';
        var prams_val = new Array();
        //console.log($this.prop('tagName') + '===========prams==========' + _clickTab);
        if(prams.length != 0){
            var prams_arr = prams.split('--');
            var prams_str = '';
            //console.log(prams_str + '===========22222==========');
            for(var i = 0; i < prams_arr.length; i++){
                var tagName = $('#' + prams_arr[i]).prop('tagName');
                var pramval = '';
                //console.log(tagName + '===========tagName==========');
                if('SELECT' == tagName){
                    pramval = $('#' + prams_arr[i] + " option:selected").text();
                    //console.log(tagName + '===========prams_str==='+'#' + prams_arr[i] + " option:selected"+'=======' + pramval);
                }else{
                    pramval = $('#' + prams_arr[i]).val();
                }
                
                prams_str = '"' + prams_arr[i] + '":"' + pramval + '"';
                prams_val.push(prams_str);
            };
        }
        var prams_data = "{" + prams_val.join(",") + "}";
        prams_data = $.parseJSON(prams_data);//将字符串转成json格式的对象
        //console.log(linkattr + '===========href==========' + prams_data);
        if(_clickTab){
            $.post(_clickTab,
                prams_data,
                function(data){
                    $("#" + disid).html(data);
                }
            );
        }
    }

    注意:prams参数如果有换行符等特殊字符需要自行处理。

    调用方式:

    <button type="button" class="btn btn-default shiny" id="getRemark" target="__CONTROLLER__/remark" onclick="btnsubmit('getRemark', 'target', 'page-content', 'reservation')">更新备注</button>
    <a id="linkOrderLst" target="__CONTROLLER__/lst" onclick="btnsubmit('linkOrderLst', 'target', 'page-content', '')">订单列表</a></li>

    许多地方还考虑不周,你有更好的处理方式吗?请告诉我。。。

  • 相关阅读:
    Object添加Symbol.iterator办法执行for--of
    二十四节气
    正则
    内容换行展示
    textarea 友好提示
    yyyy-MM-dd
    Repeater和PagedDataSource 绑定数据
    刷新 跳转 关闭 时弹窗
    SqlParameter CommandType.Text CommandType.StoredProcedure;
    JQuery disabled(禁用启用按钮)和display
  • 原文地址:https://www.cnblogs.com/rwxwsblog/p/4491752.html
Copyright © 2011-2022 走看看