https://yunpan.cn/cZVeSJ33XSHKZ 訪問密碼 0fc2
今天整合lightbox插件Fancybox1.3.4，發現1.3.4版本太老了。而目前easyui 1.4.x的jquery的版本已經到達1.11.x以上。
本以為不能再使用這個插件，但是發現還是有人重寫了插件的方法讓其支持jquery 1.11.x以上，最上面是下載地址。
不過有收費插件fancybox2.0，本身支持高版本的jquery，大家可以使用
使用fancybox非常簡單。解壓包下的index基本有所有例子
直接運行結果：
顯示非常動感。
以SysSample例子為例子 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系統（8）-MVC與EasyUI DataGrid 分頁
必須讓SysSample支持上傳文件上傳 構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系統（32）-swfupload多文件上傳[附源碼]
我之前只發布過多文件上傳的源碼，實際多文件上傳里面也包含了單文件上傳。
（整合你自己項目時候忽略easyui。可能是的表格插件是datatable,jqgrid,extjs等，但是基本同理）
修改Create.cshtml代碼
<tr> <td style="width:100px; text-align:right;"> @Html.LabelFor(model => model.Photo)： </td> <td> @Html.TextBoxFor(model => model.Photo) </td> <td> @Html.ValidationMessageFor(model => model.Photo) </td> </tr>
為
<tr> <th> @Html.LabelFor(model => model.Photo)： </th> <td> @Html.HiddenFor(model => model.Photo) <img class="expic" src="/Content/Images/NotPic.jpg" /><br /> <a href="javascript:$('#FileUpload').trigger('click');" class="files"> <input type="file" id="FileUpload" name="FileUpload" onchange="Upload('SingleFile', 'Photo', 'FileUpload','1','1');" /> </a><span class="uploading">請稍候...</span> @Html.ValidationMessageFor(model => model.Photo) </td> </tr>
NotPic.jpg圖片為 ，這個是我自己PS的丑圖片(沒有上傳時顯示的照片)
//文件上傳 function Upload(action, repath, uppath, iswater, isthumbnail, filepath) { var sendUrl = "/Core/upload_ajax.ashx?action=" + action + "&ReFilePath=" + repath + "&UpFilePath=" + uppath; //判斷是否打水印 if (arguments.length == 4) { sendUrl = "/Core/upload_ajax.ashx?action=" + action + "&ReFilePath=" + repath + "&UpFilePath=" + uppath + "&IsWater=" + iswater; } //判斷是否生成宿略圖 if (arguments.length == 5) { sendUrl = "/Core/upload_ajax.ashx?action=" + action + "&ReFilePath=" + repath + "&UpFilePath=" + uppath + "&IsWater=" + iswater + "&IsThumbnail=" + isthumbnail; } //自定義上傳路徑 if (arguments.length == 6) { sendUrl = filepath + "tools/upload_ajax.ashx?action=" + action + "&ReFilePath=" + repath + "&UpFilePath=" + uppath + "&IsWater=" + iswater + "&IsThumbnail=" + isthumbnail; } //開始提交 $("form").ajaxSubmit({ beforeSubmit: function (formData, jqForm, options) { //隱藏上傳按鈕 $("#" + repath).nextAll(".files").eq(0).hide(); //顯示LOADING圖片 $("#" + repath).nextAll(".uploading").eq(0).show(); }, success: function (data, textStatus) { if (data.msg == 1) { $("#" + repath).val(data.msgbox.split(",")[0]); $("#" + repath).next("img").attr("src", data.msgbox.split(",")[0]); } else { alert(data.msgbox); } $("#" + repath).nextAll(".files").eq(0).show(); $("#" + repath).nextAll(".uploading").eq(0).hide(); }, error: function (data, status, e) { alert("上傳失敗，錯誤信息：" + e); $("#" + repath).nextAll(".files").eq(0).show(); $("#" + repath).nextAll(".uploading").eq(0).hide(); }, url: sendUrl, type: "post", dataType: "json", timeout: 600000 }); };
后台方法提取32節的upload_ajax.ashx文件即可
這樣就完成支持單文件上傳了
別忘記加入CSS
a.files, a.files input{ outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ }
.uploading{ float:left; background:url(loading2.gif) no-repeat left center; padding-left:18px;display:none; line-height:24px; height:24px; color:#333; }
.expic{cursor: pointer; width: 140px; height: 140px; border: 1px #ccc solid;}
.uploading{ float:left; background:url(Images/loading2.gif) no-repeat left center; padding-left:18px;display:none; line-height:24px; height:24px; color:#333; }
#FileUpload{ width:140px;}
運行結果：
記得添加多點數據，這樣才比較好看
運行結果
datagrid代碼
$('#List').datagrid({ url: '/SysSample/GetList', width: SetGridWidthSub(10), methord: 'post', height: SetGridHeightSub(39), fitColumns: true, sortName: 'Id', sortOrder: 'desc', idField: 'Id', pageSize: 10, pageList: [10, 20, 30, 40, 50], pagination: true, striped: true, //奇偶行是否區分 singleSelect: true,//單選模式 //rownumbers: true,//行號 onLoadSuccess: function (data) { $("a.example").fancybox(); }, columns: [[ { field: 'Id', title: '@Resource.TitleID', width: 80,sortable: true }, { field: 'Name', title: '@Resource.TitleName', width: 60 }, { field: 'Age', title: '年齡', width: 50, align: 'right' }, { field: 'Bir', title: '生日', width: 80, align: 'right', formatter: function (value) { return SubStrYMD(value) } }, { field: 'Photo', title: '照片', width: 100, align: 'center', formatter: function (value, row, index) { return '<a class="example" title="'+row.Note+'" href="' + value + '"><img width="80px" alt="example" src="' + value + '" /></a>'; } }, { field: 'Note', title: '@Resource.TitleRemark', width: 260 }, { field: 'CreateTime', title: '@Resource.TitleCreateTime', width: 160, align: 'center' } ]] });
{ field: 'Photo', title: '照片', width: 100, align: 'center', formatter: function (value, row, index) { return '<a class="example" title="'+row.Note+'" href="' + value + '"><img width="80px" alt="example" src="' + value + '" /></a>'; } },
核心代碼解析。這段代碼來源於fancybox插件的第一個樣例代碼。
但是插件代碼只演示了ID方式的顯示，我們需要變通一下用class而已(下面是easyui逐行生成后的代碼)
<a class="example" title="這世界上除了你自己，沒有誰可以真正幫到你。" href="/upload/201602/17/201602171809062531.jpg"><img width="80px" alt="example" src="/upload/201602/17/201602171809062531.jpg"></a>
所以我們在初始化時候必須使用class方式：即
$("a.example").fancybox();
代碼必須寫在datagrid加載之后。不能寫在$(function(){});里面。因為$(function(){});比datagrid初始化可能更快
onLoadSuccess: function (data) {
$("a.example").fancybox();
},
運行結果：
如果你的記錄支持多張圖片。那么必須再新建一張圖片子表來關聯。
然后用到樣例中的：多張顯示
代碼用組的方式：
$("a[rel=example_group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } });
本文到此為止！有興趣下載32節代碼。來改裝一下