点击按钮修改弹出框里的数据

最新推荐文章于 2024-04-23 08:12:53 发布

孤炎

最新推荐文章于 2024-04-23 08:12:53 发布

阅读量1.9k

点赞数 2

分类专栏： erp小摘文章标签： html

本文链接：https://blog.csdn.net/weixin_48897289/article/details/111300329

版权

erp小摘专栏收录该内容

3 篇文章 0 订阅

订阅专栏

点击按钮：触发事件

<script>
        /**
         * 操作按钮
         * @param code
         * @param row
         * @param index
         * @returns {string}
         */
        function operateFormatter(code, row, index) {
            dataMap[row.id] = row;
            var trId = row.id;
            var  total=row.total;
            var inputnum=row.inputnum;
            var operateBtn = [
                '<a class="btn btn-xs btn-primary" title="修改" href="javascript:;"tag="'+trId+'" onclick="alter(this)"><i class="fa fa-edit"></i>修改</a>',
                //'<a class="btn btn-xs btn-primary" title="修改明细" href="javascript:;"tag="'+trId+'" onclick="showDetail(this)"><i class="fa fa-edit"></i>修改明细</a>',
            ];
            return operateBtn.join('');
        }
</script>

事件：接收url、打开模态框

<script>
        function showDetail(selector){
            var id=$(selector).attr('tag');//获得自定义的tag标签的值
            $("#detailDiv").modal('show');//展示弹出窗
            $("#detail_iframe").attr('src',"alter?id="+id);//iframe可以将页面在标签展示，这里将页面url填充到src
        }
</script>

模态框

<body>
    <div class="modal fade" id="detailDiv" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title" id="ModalTitle">修改明细</h5>
                </div>
                <div class="modal-body">
                	<input type="hidden" id="alterid"/>
                    <p>
                        修改前:<input type="number" id="alter" disabled /><!-- disabled:不可编辑 -->
                    </p>
                    <p>
                        修改后:<input type="number"  id="alter2"/>
                    </p>
                    <p>
                        备注:<input type="text" id="remark" />
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="altersubmit()">提交</button>
                </div>
            </div>
        </div>
    </div>
</body>

点击提交按钮：触发事件

<script>
    function altersubmit(){
        var newid=$("#alterid").val();
        var num=$("#alter2").val();
        var remark=$("#remarks").val();
        var postdata={id:newid,NUM:num,REMARK:remark};
        var url='PAGE/list';
        $.post(url,postdata,function(data){
            alert('提交成功');
            $('#detailDiv').modal('hide');
            var newUrl=$.tableUtil._option.url;
            $("#tablelist").bootstrapTable('refresh', {url: newUrl});
        });
    }
</script>