1、首先是Kendo UI的js和Css的引入文件 ， 大家對照着引用即可，引用前臺的樣式我就不多說了，百度上到處都是！
<html>
<head>
<title></title>
<link href="~/Content/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/styles/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="~/Content/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<link href="~/Content/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="~/Scripts/js/jquery.min.js"></script>
<script src="~/Scripts/js/kendo.all.min.js"></script>
<script src="~/Scripts/js/kendo.grid.min.js"></script>
<script src="~/Scripts/js/messages/kendo.messages.zh-CN.min.js"></script>
<script src="~/Content/js/kendo.editor.min.js"></script>
<script src="~/Content/js/kendo.web.min.js"></script>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-size: 50px 50px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
2、實例化dome操作
我在這裏講的是 Grid 顯示列表操作，然後頭像上傳數據，下面我把註釋寫詳細一些方便大家觀看，
<div id="grid"></div><script type="text/javascript">
$(function () {
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
schema: {
total: "Total",
model: {
id: "SID",
fields: {
SID: { editable: false, nullable: true }, //editable: false(是否需要編輯) nullable : true,(是否允許爲空)
//validation是驗證
image: {
validation: {
required: true,
//type:"file"
}
},
sname: { validation: { required: true } },
sage: { validation: { required: true } },
six: { validation: { required: true } },
stel: { validation: { required: true } },
address: { validation: { required: true } }
}
}
},
dataType: "json",
transport: {
dataType: "json",
read: "/Default1/show",
destroy: {
url: "/Default1/destroy",//刪除
dataType: "json"
},
update: {
url: "/Default1/update",//修改
dataType: "json"
},
create: {
url: "/Default1/add",//添加
dataType: "json"
}
},
pageSize: 20
},
height: 550,
groupable: true,//排序
sortable: true,//分組
pageable: { //分頁
//refresh: true,
pageSizes: true,
buttonCount: 5
},
toolbar: ["create"], //添加按鈕
columns: [{
field: "SID",
title: "編號 ",
width: 20
}, {
//template: "<div class='customer-photo'" +
// "style='background-image: url(../Content/img/#:data.image#.jpg);'></div>" +
// "<div class='customer-name'></div>",//圖片顯示
field: "image",
title: "圖 ",
width: 50,
editor: categoryDropDownEditor
, template: "<div class='customer-photo'" +
"style='background-image: url(../Content/img/#:data.image#);'></div>" +
"<div class='customer-name'>#:data.image#</div>",//圖片顯示
}, {
field: "sname", title: "姓名 ",
width: 30
}, {
field: "sage",
title: "年齡 ",
width: 30
}, {
field: "six",
title: "性別 ",//性別根據0，1判斷輸出男 女
width: 30,
values: [
{ text: "男", value: 0 },
{ text: "女", value: 1 },
]
}
, {
field: "stel", title: "電話 ",
width: 50
}, {
field: "address", title: "地址 ",
width: 70
},
{
command: ["edit", "destroy"], title: "操作 ",
width: 100
}
],
editable: {// 設置可以在列表中進行編輯數據
// 設置刪除時顯示的確認信息
confirmation: "您確定要進行刪除操作嗎？",
//createAt : "top",// 添加位置，默認是top：從第一行進行添加
destroy: true,// 不允許刪除
mode: "popup",// 設置編輯形式爲彈出框(popup)還是在列表中(inline)
//template: kendo.template($("#editTemplate").html())//設置彈出框中加載的內容,設置此項mode必須是popup
},
/*groupable : {// 設置列表表頭
messages : {empty : "用戶信息列表"}
},*/
groupable: false,
change: function (e) {
alert(11);
material_id_global = e.sender.selectable.userEvents.currentTarget.cells[0].innerText;
}
});
//上傳圖片成功後的回調函數
function uploadPhotoSuccess(e) {
var objid = e.response;
//$(update)
}
//字段修改格式化 修改框 轉換爲上傳按鈕
function categoryDropDownEditor(container, options) {
console.info(container);
$('<input type="hidden" name=UpdateImg>').appendTo(container);
$('<input type="file" name="' + options.field + '" />')
.appendTo(container)
.kendoUpload({
async: { //異步上傳圖片到指定地址中
saveUrl: "/Default1/save",
removeUrl: "/Default1/remove",
autoUpload: true
}
,
localization: { //設置上傳按鈕名稱
select: "上傳預覽圖片"
},
success: uploadPhotoSuccess //上傳成功後執行的回調函數
});
}
$("#files").kendoUpload({
async: {
saveUrl: "/Default1/save",
removeUrl: "/Default1/remove",
autoUpload: true
}
});
})
</script>
<script type="text/javascript">
$(function () {
$("#dialog").kendoWindow({
title: "Title",
width: 500,
height: 300,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
modal: false
});
})
</script>最重要的代碼，也是大家最關心的代碼， 頭像上傳（也可以是文件上傳）的代碼，就是上面的代碼中的指定部分：
//字段修改格式化 修改框 轉換爲上傳按鈕
function categoryDropDownEditor(container, options) {
console.info(container);
$('<input type="hidden" name=UpdateImg>').appendTo(container);//把指定內容存放到container變量中
$('<input type="file" name="' + options.field + '" />')
.appendTo(container)
.kendoUpload({
async: { //異步上傳圖片到指定地址中
saveUrl: "/Default1/save",
removeUrl: "/Default1/remove",
autoUpload: true
}
,
localization: { //設置上傳按鈕名稱
select: "上傳預覽圖片"
},
success: uploadPhotoSuccess //上傳成功後執行的回調函數
});
}以上的方法是在我點上傳圖片操作時把指定的圖片傳到後臺，然後把後臺返回的數據 uploadPhotoSuccess 這個回掉方法去處理並且顯示到界面！
這一步非常關鍵，因爲我的後臺是用.NET寫的，這一步做了訪問後臺，讀取數據到前臺界面顯示，數據庫訪問是SQL，用的是.NET中的EF框架，本文不適用於新手。
3、後臺代碼部分
public class Default1Controller : Controller
{
//
// GET: /Default1/
studentDBEntities2 se = new studentDBEntities2();
public ActionResult Index()
{
return View();
}
//顯示數據
public ActionResult show()
{
var stu = se.stus.ToList();
return Json(stu, JsonRequestBehavior.AllowGet);
}
//刪除
public ActionResult destroy(stu s)
{
stu S = se.stus.Find(s.SID);
se.stus.Remove(S);
se.SaveChanges();
return Json(S, JsonRequestBehavior.AllowGet);
}
string img = "";
//修改
public ActionResult update(stu s)
{
stu S = se.stus.Find(s.SID);
S.SID = s.SID;
S.image = s.image;
S.sname = s.sname;
S.sage = s.sage;
S.stel = s.stel;
S.six = s.six;
S.address = s.address;
se.SaveChanges();
return Json(S, JsonRequestBehavior.AllowGet);
}
[HttpPost]
[ValidateInput(false)]
public string Save(IEnumerable<HttpPostedFileBase> image)
{
// "files"上傳組件的名稱是“文件”
if (image != null)
{
foreach (var file in image)
{
var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("~/Content/img/"), fileName);
//保存到圖片路勁
file.SaveAs(physicalPath);
img = file.FileName;
return Newtonsoft.Json.JsonConvert.SerializeObject(img);
}
}
return "";
}
//添加
public ActionResult add(stu s)
{
se.stus.Add(s);
se.SaveChanges();
return Json(s, JsonRequestBehavior.AllowGet);
}
//下載
public FileStreamResult DownFile(string filePath, string fileName)
{
string absoluFilePath = Server.MapPath(System.Configuration.ConfigurationManager.AppSettings["AttachmentPath"] + filePath);
return File(new FileStream(absoluFilePath, FileMode.Open), "application/octet-stream", Server.UrlEncode(fileName));
}
}這一步也有一個要注意的地方，返回值，返回值一定要是完整的json格式，因爲Kendo UI中前臺數據和後臺數據交互全都是用的json格式，所以大家在傳值的時候一定要先想到json格式的發送數據和接收數據。
話不多說，東西全在代碼裏。
大家如果還有不懂上傳頭像（或上傳文件）怎麼操作的可以給我留言，把您遇到的問題簡單描述一下，找我談人生談理想的也可以留言哦
！！！