MVC+vue.js+iview
项目需要，最近在学vue.js，领导决定用iview这个ui，于是写了这个基于MVC的例子。
前端代码
<html>
<head>
<meta charset="utf-8">
<title>iview exampletitle>
@*<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/[email protected]/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: '确认要删除吗？
',
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();
///
/// 修改/添加
///
///
///
/// 删除
///
///
///
/// 搜索
///
/// 搜索条件
///
/// 构造班级/年级级联数据
///
/// gcs = new List();
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 GetChildren(int nid)
{
var g = db.Class.Where(p => p.NID == nid).OrderBy(p => p.BID).ToList();
List gcs = new List();
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 children { set; get; }
}
public ActionResult TreeSource()
{
return Json(Tree());
}
#region 构造 树
public static List Tree()
{
DHJEntities db = new DHJEntities();
List L1 = new List();
List L2 = new List();
List L3 = new List();
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 chil = new List();
chil = L2.Where(c => c.ParentID == item.NodeId).ToList();
item.children = chil;
}
return L1;
}
public class TreeClass
{
///
/// 数据类型 1 年级列表 2 班级列表
///
public int DataType { set; get; }
public int Nid { set; get; }
//public string Bid { set; get; }
///
/// ParentID 父节点ID
///
public int ParentID { set; get; }
public int BID { set; get; }
public List children { set; get; }
///
/// 节点名称
///
public string title { set; get; }
public int NodeId { set; get; }
}
#endregion
“`