vue.js下拉框选择,修改时显示已有的选择信息

<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");
      }

   }
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值