bootstrap-table做的编辑页（防老年痴呆）

1.bootstrap-table做的编辑页简单，不需要遍历数据，页面清晰。
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('参数表列表')"/>
    <style>
        .selects-table {
            width: 100%;
            background: #fff;
            border-radius: 6px;
            padding-bottom: 13px;
            box-shadow: 1px 1px 3px rgba(0,0,0,.2);
            padding-left: 15px;
            padding-right: 13px;
        }
        .buttons{
            text-align: right;
            position:relative;right:50px;top:10px;
        }
    </style>
</head>
<body class="gray-bg">
<input th:value="${tenantId}" id="tenantid" type="hidden"/>
<div class=" selects-table table-striped">
    <table id="bootstrap-table" data-show-columns="false"></table>
</div>
<div class="buttons">
    <input type="button" class="btn btn-primary" value="确定" οnclick="submit()">
    <input type="button" class="btn btn-danger" value="取消" οnclick="clos()">
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var noresize = true;
    var tenantid = $('#tenantid').val();
    var _height = ($(window).height())-70;
    var prefix = ctx + "tenant/tenantParameters";
    $(function () {
        var options = {
            id: "bootstrap-table",
            url: prefix + "/viewlist?tenantID=" + tenantid,
            updateUrl: prefix + "/edit/{id}",
            modalName: "多租户参数表",
            pageSize: [100,'ALL'],
            pagination: false,
            showRefresh:false,
            showExport: false,
            detailView:false,
            showToggle:false,
            showColumns:false,
            showSearch:false,
            height: _height,
            columns: [
                {
                    field: 'id',
                    title: '参数id',
                    visible: false
                },
                {
                    field: 'parameterCn',
                    title: '参数疑义',
                    sortable: false,
                    width:400,
                },
                {
                    field: 'parameterName',
                    title: '参数名',
                    sortable: false,
                    width:400,
                },
                {
                    field: 'value',
                    title: '参数值',
                    sortable: false,
                    undefinedText:"",
                    formatter: function (value, row, index) {
                        return '<input class="idinput" type="hidden" value="'+row.id+'"/><input id="value" class="form-control datainput" type="text"  value="' + value + '" />';
                    }
                }],
        };
        $.table.init(options);
    });

    var callback= function  (result) {
        if (JSON.stringify(result.msg)=="操作成功"){
            layer.closeAll(); //疯狂模式，关闭所有层
        }
    }

    //修改参数
    function submit() {
        var inputs= $('.datainput');
        var idinput= $('.idinput');
        var ids= new Array();
        var value=new Array();
        $.each(inputs,function (index,input){
            value.push($(this).val());
        });
        $.each(idinput,function (index,input){
            ids.push($(this).val());
        });
        $.operate.post(ctx+"tenant/tenantParameters"+ "/update", {"ids":ids,"value":value},callback);
    }
    function clos() {
        parent.closeParameter();
    }
</script>
</body>
</html>
看戏走心
发布了40 篇原创文章 · 获赞 8 · 访问量 7312
私信关注
bootstrap-table做的编辑页（防老年痴呆）

猜你喜欢
