vue.js下拉框选择,修改时显示已有的选择信息
<div class="form-group"><div class="col-sm-2 control-label">APPID</div><div class="col-sm-10"><select v-mod
·
<div class="form-group"> <div class="col-sm-2 control-label">APPID</div> <div class="col-sm-10"> <select v-model="shyfkAct.appid" id="merId" class="form-control" > <option v-for="item in items" v-bind:value="item.value"> {{item.text}} </option> </select> </div> </div>
$(function () { $("#jqGrid").jqGrid({ url: baseURL + 'shyfk/act/list', datatype: "json", colModel: [ { label: 'id', name: 'id', width: 120, key: true }, { label: '活动标题', name: 'title', width: 75}, { label: '开始日期', name: 'startDate', width: 75 }, { label: '结束日期', name: 'endDate', width: 70 }, { label: '充值金额', name: 'recharge', width: 70, formatter:function(value,row){ var str=0.00; if(!isNaN(value)){ str=value/100.00; return str.toFixed(2); }else { return '0.00'; }} }, { label: '赠送金额', name: 'gift', width: 70 , formatter:function(value,row){ var str=0.00; if(!isNaN(value)){ str=value/100.00; return str.toFixed(2); }else { return '0.00'; }} }, { label: '状态', name: 'state', width: 70, formatter:function(value,row){ if( value == "0" ) { return "关闭"; }else if( value == "1" ){ return "开启"; }else { return ""; }} }, { label: 'APPID', name: 'appid', width: 70} ], 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.pageNum", total: "page.pages", records: "page.total" }, prmNames : { page:"page", rows:"limit", order: "order" }, gridComplete:function(){ //隐藏grid底部滚动条 //$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); } }); laydate.render({ elem: '#startDate', type: 'date', format:"yyyy-MM-dd", done: function (value, date, endDate) { vm.shyfkAct.startDate=value; } }); laydate.render({ elem: '#endDate', type: 'date', format:"yyyy-MM-dd", done: function (value, date, endDate) { vm.shyfkAct.endDate=value; } }); vm.getMerchant(); }); var vm = new Vue({ el:'#rrapp', data:{ q:{ title: null }, showList: true, /* selected: "",*/ items: [{text: '请选择请商户', value: ''}], title: null, shyfkAct: { id:null, title:null, startDate:null, endDate:null, recharge:null, gift:null, state:null } }, methods: { query: function () { vm.reload(); }, add: function(){ this.showList = false; vm.title = "新增"; vm.shyfkAct = {}; vm.shyfkAct.appid=""; /* vm.selected = ""; vm.items = [{text: '请选择请商户APPID', value: ''}]; vm.getMerchant();*/ vm.shyfkAct={ id:null, title:null, startDate:null, endDate:null, recharge:null, gift:null, state:null } }, update: function (event) { var id = getSelectedRow(); if(id == null){ return ; } $.get(baseURL + "shyfk/act/info/"+id, function(r){ vm.showList = false; vm.title = "修改"; /* vm.selected = ""; vm.items = [{text: '请选择请商户APPID', value: ''}];*/ /* vm.getMerchant();*/ vm.shyfkAct = r.shyfkAct; }); }, del: function (event) { var ids = getSelectedRows(); if(ids == null){ return ; } confirm('确定要删除选中的记录?', function(){ $.ajax({ type: "POST", url: baseURL + "shyfk/act/delete", contentType: "application/json", data: JSON.stringify(ids), success: function(r){ if(r.code == 200){ alert('操作成功', function(index){ vm.reload(); }); }else{ alert(r.msg); } } }); }); }, saveOrUpdate: function (event) { /* vm.shyfkAct.appid = $("#merId").find("option:selected").val();*/ if(vm.check()){ var url = vm.shyfkAct.id == null ? "shyfk/act/save" : "shyfk/act/update"; $.ajax({ type: "POST", url: baseURL + url, contentType: "application/json", data: JSON.stringify(vm.shyfkAct), success: function(r){ if(r.code == 200){ alert('操作成功', function(index){ vm.reload(); }); }else{ alert(r.msg); } } }); } }, check: function () { if(vm.shyfkAct.title == null){ layer.msg("活动名称为必输项!"); return false; } if(vm.shyfkAct.startDate == null){ layer.msg("开始日期必输项!"); return false; } if(vm.shyfkAct.endDate == null){ layer.msg("结束日期为必输项!"); return false; } if(vm.shyfkAct.recharge == null){ layer.msg("充值金额为必输项!"); return false; }else if (vm.shyfkAct.recharge <= 0){ layer.msg("充值金额不能为负数"); return false; } if(vm.shyfkAct.gift == null){ layer.msg("赠送金额为必输项!"); return false; }else if (vm.shyfkAct.gift <= 0){ layer.msg("赠送金额不能为负数"); return false; } if(vm.shyfkAct.state == null){ layer.msg("状态为必输项!"); return false; } if(vm.shyfkAct.endDate!=""&& vm.shyfkAct.startDate!="" && vm.shyfkAct.startDate >= vm.shyfkAct.endDate) { layer.msg("开始日期必须小于结束日期!"); return false; } if(vm.shyfkAct.appid==null||vm.shyfkAct.appid==""){ alert("请选择商户"); return; } return true; }, decimalFormat: function(str ,int_num,point_num,alertStr) { RegularExp_tmp="/^[+,-]{0,1}[0-9]{0,"+int_num+"}[.]{1}[0-9]{0,"+point_num+"}$|^[+,-]{0,1}[0-9]{0,"+int_num+"}$/"; RegularExp=eval(RegularExp_tmp); if (RegularExp.test(str)) { return true; } else { return false; } }, getMerchant: function () { vm.items = [{text: '请选择商户', value: ''}]; $.get(baseURL + "shyfk/act/getMerchant", function (r) { for (var i = 0; i < r.merchantList.length; i++) { var text = r.merchantList[i].merName; var value = r.merchantList[i].appid; vm.items.push({text: text, value: value}); } }); }, reload: function (event) { vm.showList = true; var page = $("#jqGrid").jqGrid('getGridParam','page'); $("#jqGrid").jqGrid('setGridParam',{ postData:{'title': vm.q.title}, page:page }).trigger("reloadGrid"); } } });
更多推荐
已为社区贡献1条内容
所有评论(0)