MVC+vue.js+iview
来源：互联网 发布：python socket select 编辑：程序博客网 时间：2024/06/07 22:03
项目需要，最近在学vue.js，领导决定用iview这个ui，于是写了这个基于MVC的例子。
前端代码
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>iview example</title> @*<link href="~/Content/iView/iview.css" rel="stylesheet" /> <script src="~/Content/iView/iview.min.js"></script> <link href="~/Content/iView.css" rel="stylesheet" /> <script src="~/Content/vue.js"></script>*@ <script src="~/js/vue-resource.js"></script> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview@2.1.0/dist/styles/iview.css"> <script src="~/js/vue-resource.js"></script> <style> .ivu-table .demo-table-info-row td { background-color: #2db7f5; color: #fff; } .ivu-table .demo-table-error-row td { background-color: #ff6600; color: #fff; } .ivu-table td.demo-table-info-column { background-color: #2db7f5; color: #fff; } .ivu-table .demo-table-info-cell-name { background-color: #2db7f5; color: #fff; } .ivu-table .demo-table-info-cell-age { background-color: #ff6600; color: #fff; } .ivu-table .demo-table-info-cell-address { background-color: #187; color: #fff; } .expand-row { margin-bottom: 16px; } </style></head><body> <div id="app"> <i-button v-on:click="show" type="warning">添加</i-button> <Modal v-model="modal1" v-bind:title="title" v-on:on-ok="ok" v-on:on-cancel="cancel"> <div style="text-align:center"> <template> <input type="hidden" v-model="ModifyData.SID" /> <i-form :label-width="60"> @*<Form-item label="编号主键"> <i-input v-model="ModifyData.SID" disabled></i-input> </Form-item>*@ <Form-item label="姓名"> <i-input placeholder="请输入" v-model="ModifyData.SNAME"></i-input> </Form-item> <Form-item label="性别"> <i-select placeholder="请选择" v-model="ModifyData.SSEX"> <i-option v-for="item in sexlist" :value="item.value" :key="item.value">{{ item.label }}</i-option> </i-select> </Form-item> <Form-item label="学号"> <i-input placeholder="请输入" v-model="ModifyData.SNO"></i-input> </Form-item> <Form-item label="年级"> <i-input placeholder="请输入" v-model="ModifyData.NID"></i-input> </Form-item> <Form-item label="班级"> <i-input placeholder="请输入" v-model="ModifyData.BID"></i-input> </Form-item> <Form-item label="年级/班级"> <Cascader :data="Cascader" v-model="CascaderModel" placeholder="请选择年级/班级"></Cascader> </Form-item> <Form-item label="开始时间"> <Date-picker type="date" v-model="ModifyData.BeginTime" format="yyyy年MM月dd日" placeholder="选择日期" style="width: 200px"></Date-picker> </Form-item> <Form-item label="结束时间"> <Date-picker type="date" v-model="ModifyData.EndTime" format="yyyy年MM月dd日" placeholder="选择日期" style="width: 200px"></Date-picker> </Form-item> </i-form> </template> </div> </Modal> <i-button type="primary" size="large" v-on:click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button> <auto-complete v-model="value1" v-bind:data="SearchData" v-on:on-search="handleSearch1" icon="ios-search" placeholder="搜索" style="width:200px"></auto-complete> @*<i-input placeholder="请输入查询条件" v-model="SearchData" style="width:200px;"></i-input> <i-button v-on:click="handleSearch1" type="primary">查询</i-button>*@ <template> <i-table stripe @*:row-class-name="rowClassName"*@ highlight-row :columns="columns1" :data="data1" height="600" ref="table" @*style="width:100%;"*@></i-table> </template> <div class="layout-copy" style="text-align:center;"> 2011-2018 © </div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { CascaderModel:[], Cascader:[], value1: '', SearchData: [], title: '', sexlist: [{ value: 0, label: '男' }, { value: 1, label: '女' }], modal_loading: false, visible: false, columns1: [ { type: 'selection', width: 60, align: 'center' }, { type: 'index', width: 60, align: 'center', sortable: true }, { title: '姓名', key: 'SNAME', sortable: true, render: (h, params) => { return h('div', [ h('Icon', { props: { type: 'person', //background-color: '#87d068' } }), h('strong', params.row.SNAME) ]); } }, { title: '年级', key: 'NID', sortable: true }, { title: '班级', key: 'BID', sortable: true }, { title: '学号', key: 'SNO', sortable: true, filters: [ { label: '学号大于8', value: 1 }, { label: '学号小于8', value: 2 } ], filterMultiple: false, filterMethod (value, row) { if (value === 1) { return row.SNO >= 8; } else if (value === 2) { return row.SNO < 8; } } }, { title: '性别', key: 'SSEX', sortable: true, render: (h, params) => { var date = params.row.SSEX; return (date == 0 ? "男" : "女"); } }, { title: '开始时间', key: 'BeginTime', }, { title: '结束时间', key: 'EndTime', //render: (h, params) => { // var date1 = params.row.EndTime;// /Date(1502812800000)/ // var date = date1.substring(6, 19); // return new Date(parseInt(date)).toLocaleString().substring(0, 9); //} }, { title: '操作', key: 'action', width: 150, align: 'center', render: (h, params) => { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '5px' }, on: { click: () => { //this.show(params.index) vm.modal1 = true; vm.Modify(params); //alert(params.index); } } }, '修改'), h('Button', { props: { type: 'error', size: 'small' }, on: { click: () => { //this.remove(params.index) vm.$Modal.confirm({ title: '确认删除', content: '<p style="font-size:16px;">确认要删除吗？</p>', onOk: () => { vm.Delete(params); }, onCancel: () => { this.$Message.info('您取消了该操作'); } }); } } }, '删除') ]); } } ], data1: [], ModifyData: { SNAME: '', NID: '', BID: '', SSEX: '', SNO: '', SID: '', BeginTime: '', EndTime: '' }, modal1: false, baseUrl: "/ShopCart/", }, methods: { gc:function () { var that = this; that.$http.get(that.baseUrl + "Cascader").then(function (res) { res.data.forEach(function (val, index, arr) { that.Cascader.push(val); }) }, function (res) { alert(res.data); }); }, handleSearch1 (value) { var that = this; that.data1 = []; that.$http.get(that.baseUrl + "AutoComplete", { SearchData: value }).then(function (res) { res.data.forEach(function (val, index, arr) { that.data1.push(val); }) }, function (res) { alert(res.data); that.GetAllData(); }); }, Delete: function (params) { var that = this; that.$http.get(that.baseUrl + "Delete", params.row).then(function (res) { vm.$Message.success("删除成功"); that.GetAllData(); }, function (res) { alert(res.data.Message); that.GetAllData(); }); }, ok () { var that = this; that.$http.post("/ShopCart/Edit", that.ModifyData).then(function (res) { that.ModifyData = { SNAME: '', NID: '', BID: '', SSEX: '', SNO: '', SID: '', BeginTime: '', EndTime: '' }; that.isVisable = false; that.GetAllData(); that.$Message.success(res.data); }, function (res) { that.$Message.error(res.data); }); }, cancel () { this.ModifyData = { SNAME: '', NID: '', BID: '', SSEX: '', SNO: '', SID: '', BeginTime: '', EndTime: '' }; //this.$Message.info('您取消了操作'); //this.$Message.info({ // content: '您取消了操作', // duration: 5 //}); this.$Notice.open({ title: '提示', desc: false ? '' : '您取消了操作' }); }, Modify: function (params) { this.title = '修改'; this.modal1 = true; vm.ModifyData = params.row; var nid = params.row.NID.toString(); var bid = params.row.BID.toString(); this.CascaderModel = [nid,bid]; }, exportData (type) { if (type === 1) { this.$refs.table.exportCsv({ filename: '原始数据' }); } else if (type === 2) { this.$refs.table.exportCsv({ filename: '排序和过滤后的数据', original: false }); } else if (type === 3) { this.$refs.table.exportCsv({ filename: '自定义数据', columns: this.columns8.filter((col, index) => index < 4), data: this.data7.filter((data, index) => index < 4) }); } }, GetAllData: function () { var that = this; that.data1 = []; this.$http.post("/ShopCart/GetData").then(function (res) { res.data.forEach(function (val, index, arr) { that.data1.push(val); }) }, function (res) { that.$Message.error(res.data); }); }, //rowClassName (row, index) { // if (index % 4 === 1) { // return 'demo-table-info-row'; // } else if (index % 4 === 3) { // return 'demo-table-error-row'; // } // return ''; //}, show: function () { var that = this; this.modal1 = true; this.title = '添加'; that.$http.get(that.baseUrl + "GetSNO").then(function (res) { vm.ModifyData.SNO = res.data }, function (res) { that.$Message.error(res.data); }); } }, mounted: function () { this.$nextTick(function () { //alert(1); this.GetAllData(); this.gc(); }) }, filter: { } }) </script></body></html>后台代码
public ActionResult GetData() { db.Configuration.ProxyCreationEnabled = false; //var list = db.StudentTable.ToList().OrderBy(u=>u.SNO); var list = from d in db.StudentTable select new { BeginTime = d.BeginTime.ToString(), d.BID, EndTime = d.EndTime.ToString(), d.Grade, d.ImageUrl, d.NID, d.SID, d.SNAME, d.SNO, SSEX = d.SSEX/* == 0 ? "男" : "女",*/ }; return Json(list, JsonRequestBehavior.AllowGet); } DHJEntities db = new DHJEntities(); OperaResult op = new OperaResult(); /// <summary> /// 修改/添加 /// </summary> /// <param name="student1"></param> /// <returns></returns> public string Edit(StudentTable student1) { try { StudentTable st = new js.StudentTable(); if (student1.SID == 0)//新增 { st.ImageUrl = student1.ImageUrl; st.NID = student1.NID; st.SNO = student1.SNO; st.SSEX = student1.SSEX; st.SNAME = student1.SNAME; st.BID = student1.BID; st.BeginTime = student1.BeginTime; st.EndTime = student1.EndTime; db.StudentTable.Add(st); db.SaveChanges(); return "新增成功"; } else { st = db.StudentTable.FirstOrDefault(s => s.SID == student1.SID); st.ImageUrl = student1.ImageUrl; st.NID = student1.NID; st.SNO = student1.SNO; st.SSEX = student1.SSEX; st.SNAME = student1.SNAME; st.BID = student1.BID; st.BeginTime = student1.BeginTime; st.EndTime = student1.EndTime; db.SaveChanges(); return "修改成功"; } } catch (Exception ex) { return ex.Message; } } /// <summary> /// 删除 /// </summary> /// <param name="student"></param> /// <returns></returns> public ActionResult Delete(StudentTable student) { StudentTable st = new js.StudentTable(); try { st = db.StudentTable.FirstOrDefault(f => f.SID == student.SID); db.StudentTable.Remove(st); db.SaveChanges(); return Content("OK"); } catch (Exception ex) { return Content(ex.Message); } } public ActionResult GetSNO() { var query = db.StudentTable.Max(p => p.SNO); int TMP = Convert.ToInt32(query) + 1; string SNO = string.Format("{0:D4}", TMP); return Content(SNO); } /// <summary> /// 搜索 /// </summary> /// <param name="SearchData">搜索条件</param> /// <returns></returns> public ActionResult AutoComplete(string SearchData) { db.Configuration.LazyLoadingEnabled = false; db.Configuration.ProxyCreationEnabled = false; var list = (from d in db.StudentTable where d.SNAME.Contains(SearchData) || d.SNO.Contains(SearchData) select new { BeginTime = d.BeginTime.ToString(), d.BID, EndTime = d.EndTime.ToString(), d.Grade, d.ImageUrl, d.NID, d.SID, d.SNAME, d.SNO, SSEX = d.SSEX }).ToList(); return Json(list, JsonRequestBehavior.AllowGet); } /// <summary> /// 构造班级/年级级联数据 /// </summary> /// <returns></returns> public ActionResult Cascader() { var list = db.Class.OrderBy(u => u.NID).Select(P => P.NID).Distinct().ToList(); List<GradeClass> gcs = new List<GradeClass>(); foreach (var item in list) { GradeClass gc = new GradeClass(); gc.value = item.ToString(); gc.label = item.ToString() + "年级"; gc.children = GetChildren((int)item); gcs.Add(gc); } return Json(gcs,JsonRequestBehavior.AllowGet); } public List<GradeClass> GetChildren(int nid) { var g = db.Class.Where(p => p.NID == nid).OrderBy(p => p.BID).ToList(); List<GradeClass> gcs = new List<GradeClass>(); foreach (var item in g) { GradeClass gc = new GradeClass(); gc.value = item.BID.ToString(); gc.label = item.BNAME; gcs.Add(gc); } return gcs; } public class GradeClass { public string value { set; get; } public string label { set; get; } public List<GradeClass> children { set; get; } } public ActionResult TreeSource() { return Json(Tree()); } #region 构造 树 public static List<TreeClass> Tree() { DHJEntities db = new DHJEntities(); List<TreeClass> L1 = new List<Controllers.ShopCartController.TreeClass>(); List<TreeClass> L2 = new List<Controllers.ShopCartController.TreeClass>(); List<TreeClass> L3 = new List<Controllers.ShopCartController.TreeClass>(); var GradeList = db.Grade.OrderBy(g => g.NID).ToList(); var ClassList = db.Class.OrderBy(c => c.BID).ToList(); foreach (var item in GradeList) { L1.Add(new TreeClass { title = item.NNAME, NodeId = item.NID, DataType = 1, children = null, ParentID = 0, }); } foreach (var item in ClassList) { L2.Add(new TreeClass { Nid = (int)item.NID, NodeId = (int)item.BID, title = item.BNAME, DataType = 2, children = null, ParentID = (int)item.NID, }); } foreach (var item in L1) { List<TreeClass> chil = new List<TreeClass>(); chil = L2.Where(c => c.ParentID == item.NodeId).ToList(); item.children = chil; } return L1; } public class TreeClass { /// <summary> /// 数据类型 1 年级列表 2 班级列表 /// </summary> public int DataType { set; get; } public int Nid { set; get; } //public string Bid { set; get; } /// <summary> /// ParentID 父节点ID /// </summary> public int ParentID { set; get; } public int BID { set; get; } public List<TreeClass> children { set; get; } /// <summary> /// 节点名称 /// </summary> public string title { set; get; } public int NodeId { set; get; } } #endregion“`
阅读全文
0 0
- MVC+vue.js+iview
- 【VUE】IView.js下拉框数据双向绑定
- 浅谈Vue的iView
- vue+iview写个弹框
- MVC+VUE.JS+MUSEUI
- Vue.js的组件和框架PC与移动 iView elementUI MintUI
- Asp.net MVC+Vue.js
- 创建Vue项目 以及引入Iview
- 创建Vue项目 以及引入Iview
- 深入剖析Vue.js2 iView（一）
- iview
- vue iview组件表格 render函数的使用
- webpack+vue创建简单项目并整合iview
- vueleopard--一个简单的'vue iview webpack'管理系统
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
- Vue+iview报TypeError: this.$parent.updateGutter is not a function
- Codeforces Round #430 (Div. 2) 题解
- 横向ListView（一） ——开篇，基础逻辑实现
- Python新式类和经典类的区别
- c# 委托
- Oracle重置序列发生器（非重建）
- MVC+vue.js+iview
- redhat虚拟机磁盘扩容
- 利用Qt开发跨平台APP（二）（iOS）
- 解决Groovy复制文件的乱码
- 18.Redis Cluster
- netty案例
- windows下安装配置mycat
- 网易笔试编程题
- 每日积累（二一）--mysql 数据库优化
