项目需要,最近在学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 &copy;
        </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

“`

Logo

前往低代码交流专区

更多推荐