$(function () { $("#jqGrid").jqGrid({ url: '../sys/config/list', datatype: "json", colModel: [ {label: 'ID', name: 'id', key: true, hidden: true}, {label: '参数名', name: 'key', width: 60}, {label: '参数值', name: 'value', width: 100}, {label: '是否启用', name: 'status', width: 100, formatter: function (value) { if (value == '1') { return '启用'; } else if (value == '0') { return '无效'; } return ''; }}, {label: '备注', name: 'remark', width: 80} ], viewrecords: true, height: 385, rowNum: 10, rowList: [10, 30, 50], rownumbers: true, rownumWidth: 25, autowidth: true, multiselect: true, pager: "#jqGridPager", jsonReader: { root: "page.list", page: "page.currPage", total: "page.totalPage", records: "page.totalCount" }, prmNames: { page: "page", rows: "limit", order: "order" }, gridComplete: function () { //隐藏grid底部滚动条 $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"}); } }); }); var vm = new Vue({ el: '#rrapp', data: { q: { key: null }, showList: true, title: null, config: {}, ruleValidate: { //example key: [ {required: true, message: '参数名不能为空', trigger: 'blur'} ], value: [ {required: true, message: '参数值不能为空', trigger: 'blur'} ] } }, methods: { query: function () { vm.reload(); }, add: function () { vm.showList = false; vm.title = "新增"; vm.config = {status: 0}; }, update: function () { var id = getSelectedRow(); if (id == null) { return; } $.get("../sys/config/info/" + id, function (r) { vm.showList = false; vm.title = "修改"; vm.config = r.config; }); }, del: function (event) { var ids = getSelectedRows(); if (ids == null) { return; } confirm('确定要删除选中的记录?', function () { $.ajax({ type: "POST", url: "../sys/config/delete", contentType: "application/json", data: JSON.stringify(ids), success: function (r) { if (r.code == 0) { alert('操作成功', function (index) { vm.reload(); }); } else { alert(r.msg); } } }); }); }, saveOrUpdate: function (event) { var url = vm.config.id == null ? "../sys/config/save" : "../sys/config/update"; $.ajax({ type: "POST", url: url, contentType: "application/json", data: JSON.stringify(vm.config), success: function (r) { if (r.code === 0) { alert('操作成功', function (index) { vm.reload(); }); } else { alert(r.msg); } } }); }, reload: function (event) { vm.showList = true; var page = $("#jqGrid").jqGrid('getGridParam', 'page'); $("#jqGrid").jqGrid('setGridParam', { postData: {'key': vm.q.key}, page: page }).trigger("reloadGrid"); }, handleSubmit: function (name) { handleSubmitValidate(this, name, function () { vm.saveOrUpdate() }); }, handleReset: function (name) { handleResetForm(this, name); } } });