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格式的发送数据和接收数据。
话不多说,东西全在代码里。
大家如果还有不懂上传头像(或上传文件)怎么操作的可以给我留言,把您遇到的问题简单描述一下,找我谈人生谈理想的也可以留言哦!!!