快捷導(dǎo)航

使用Asp.net Mvc3 Razor視圖方式擴(kuò)展JQuery UI Widgets方法介紹

更新時(shí)間：2012年11月08日 16:03:52 作者：

jquery easyui grid或者extjs grid，jtable的代碼非常簡(jiǎn)潔、對(duì)于grid功能要求不是很復(fù)雜的情況下，強(qiáng)烈推薦大家使用

JQuery UI Widgets是本人非常喜歡的一套前端JS組件，日常開發(fā)中基于原有的jquery ui widget js代碼進(jìn)行開發(fā),需要寫非常多的重復(fù)代碼，同時(shí)一些現(xiàn)有組件無(wú)法滿足需求的情況下，需要對(duì)現(xiàn)有組件進(jìn)行擴(kuò)展，本文使用一套基于jquery ui 的擴(kuò)展js組件---jtable (http://www.jtable.org），包含了基本的列表和編輯窗口，比起jqGrid，jquery easyui grid或者extjs grid，jtable的代碼非常簡(jiǎn)潔、對(duì)于grid功能要求不是很復(fù)雜的情況下，強(qiáng)烈推薦大家使用！

除了jtable組件推薦給大家，本文主要向大家分享一些代碼編寫思路，如何減少前端js重復(fù)代碼，以及基于現(xiàn)有jquery ui widgets組件進(jìn)行擴(kuò)展代碼的寫法
本文涉及2個(gè)視圖文件，1個(gè)Controller文件

jTableTemplateView.cshtml// 基于jtable組件的代碼模板
someBusinessView.cshtml // 某業(yè)務(wù)功能視圖模板
TemplateController.cs // 模板后臺(tái)Controller控制
大體思路如下：

someBusinessView.cshtml，通過(guò)
<script type="text/javascript" src="/Template/jsTemplateView?code=xxx" ></script>
腳本src屬性指向jTableTemplateView頁(yè)面，同時(shí)傳遞參數(shù)code參數(shù)到TemplateController，
TemplateController調(diào)用jTableTemplateView視圖渲染時(shí)，通過(guò)參數(shù)Code獲取業(yè)務(wù)對(duì)象相關(guān)信息或變量傳遞給jsTemplateView頁(yè)面，然后輸出業(yè)務(wù)腳本信息到someBusinessView，代碼如下：
1.jTableTemplate.View

復(fù)制代碼代碼如下:

 
@{ 
Layout = null; // 只輸出當(dāng)前視圖 
Response.ContentType = "application/javascript"; // 設(shè)定返回MIME類型 
} 
/* 
* jTableTemplate v0.1 created by wdong 2012-11-07 
* Copyright (c) 2012 wdong http://wdong.cnblogs.com/ mail:wdong0472@gmail.com 
* 使用jTableTemplate可以方便生成頁(yè)面上所需的Grid列表及Editor編輯窗口，非常簡(jiǎn)潔的實(shí)現(xiàn)基本表單的CRUD操作 
* USAGE: 參數(shù)說(shuō)明 
* $(selector).ControlName({title:"please your grid title"}); 
* $(selector).ControlName("load"); 
*/ 

@using Tiyo.Platform.Business.Entities 


@{ 
string code = ViewBag.Code; 

ObjectEntity entity = ViewData[code + ".ObjectCode"] as ObjectEntity; 
IList<ObjectDetailsEntity> entityDetails = entity.Details; 


string controlName = ViewData[code + ".ControlName"].ToString(); 
string title = ViewData[code + ".Title"].ToString(); 
string paging = ViewData[code + ".Paging"].ToString(); 
string pageSize = ViewData[code + ".PageSize"].ToString(); 
string defaultSorting = ViewData[code + ".DefaultSorting"].ToString(); 
string listAction = ViewData[code + ".ListAction"].ToString(); 
string updateAction = ViewData[code + ".UpdateAction"].ToString(); 
string deleteAction = ViewData[code + ".DeleteAction"].ToString(); 
} 

(function ($) { 
// extend jtable jquery ui widget 
$.widget("jTableTemplate.@controlName", $.extend(true,{}, $.hik.jtable.prototype, { 
_init: function(){ 
return $.hik.jtable.prototype._init.apply(this, arguments); 
} 
})); 

//各種屬性、參數(shù) 
var options = { 
title: '@title' 
,paging: @paging //Enables paging 
,pageSize:@pageSize //Actually this is not needed since default value is 10. 
,sorting: true //Enables sorting 
,defaultSorting: '@defaultSorting' //Optional. Default sorting on first load. 
,actions: { 
listAction: '@listAction' 
,deleteAction: '@deleteAction' 
,updateAction: '@updateAction' 
} 
,fields: { 
ID: { 
title:"主鍵" 
,list:false 
} 
@foreach(var field in entityDetails) 
{ 
if(!field.Ispk) 
{ 
<text> 
,@field.Fieldname:{ 
title:"@field.Displayname" 
,list: @field.Visible.ToString().ToLower() 
} 
</text> 
} 
} 
} 
}; 

$.fn.extend(true,$.jTableTemplate.@{@controlName}.prototype,{options:options}); 
})(jQuery);

此處擴(kuò)展JQuery UI Widgets的基本結(jié)構(gòu)代碼如下：

復(fù)制代碼代碼如下:

$.widget("ui.customwidget", $.extend({}, $.ui.extendwidget.prototype, { 
_init: function(){ 
return $.ui.extendwidget.prototype._init.apply(this, arguments); 
} 

// Override other methods here. 
}));

customerwidget為你自定義的插件名稱，extendwidget為現(xiàn)有插或被擴(kuò)展插件
2.someBusinessView.cshtml

復(fù)制代碼代碼如下:

@{ 
ViewBag.Title = "AreaList"; 
} 

<script type="text/javascript" src="/JQueryTemplate/jTableTemplate?code=xxx"></script> 

<div id="DataContainer"></div> 

<script type="text/javascript"> 
$.SomeApp = { 
doInit: function() { 
try { 
$('#DataContainer').xxx({title:"test列表"}).xxx("load"); 
} catch (err) { 
alert(err); 
} 
} 
} 

$(function(){ 
$.SomeApp .doInit(); 
}); 

</script>

3.TemplateController.cs

復(fù)制代碼代碼如下:

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using Tiyo.Platform.Controller; 
using System.Web.Mvc; 

namespace Tiyo.Plugins.ExtJsTemplate.Controllers 
{ 
public class JQueryTemplateController:BaseController 
{ 
/// <summary> 
/// 獲取JTable列表+編輯窗口 
/// </summary> 
/// <param name="code">環(huán)境上下文標(biāo)識(shí)</param> 
/// <returns></returns> 
public ViewResult jTableTemplate(string code) 
{ 
ViewBag.Code = code; 

// 添加視圖所需環(huán)境上下文信息（即控件所需變量值等信息） 
BaseDataHelper.AddContextData(code,ViewData); 
return View(); 
} 
} 
}