时间:2021-05-25
JQuery UI Widgets是本人非常喜欢的一套前端JS组件,日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码,同时一些现有组件无法满足需求的情况下,需要对现有组件进行扩展,本文使用一套基于jquery ui 的扩展js组件---jtable (http://
* 使用jTableTemplate可以方便生成页面上所需的Grid列表及Editor编辑窗口,非常简洁的实现基本表单的CRUD操作
* USAGE: 参数说明
* $(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);
}
}));
//各种属性、参数
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);
此处扩展JQuery UI Widgets的基本结构代码如下:
复制代码 代码如下:
$.widget("ui.customwidget", $.extend({}, $.ui.extendwidget.prototype, {
_init: function(){
return $.ui.extendwidget.prototype._init.apply(this, arguments);
}
// Override other methods here.
}));
customerwidget为你自定义的插件名称,extendwidget为现有插或被扩展插件
2.someBusinessView.cshtml
复制代码 代码如下:
@{
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
复制代码 代码如下:
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">环境上下文标识</param>
/// <returns></returns>
public ViewResult jTableTemplate(string code)
{
ViewBag.Code = code;
// 添加视图所需环境上下文信息(即控件所需变量值等信息)
BaseDataHelper.AddContextData(code,ViewData);
return View();
}
}
}
注意,此处代码为获取jTableTemplate模板视图所需变量信息,大家可根据自己习惯和需要自行替换
// 添加视图所需环境上下文信息(即控件所需变量值等信息)
BaseDataHelper.AddContextData(code,ViewData);
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了asp.net实现在非MVC中使用Razor模板引擎的方法。分享给大家供大家参考。具体分析如下:模板引擎介绍Razor、Nvelocity、Vte
ASP.NET就不用介级了,MVC3是指模型-视图-控制器(MVC)模式,是一项将Web应用程序组件分开的体系结构设计原则。通过分开组件,您可以更好地控制应用程
本文为大家演示下MVC3中怎样使用模板页,在传统的webform设计模式中,我们使用masterpage作为模板页,在MVC3razor视图设计中,我们使用另一
下面介绍jquery提交表单mvc3后台处理示例。 JQuery提交表单: 代码如下:$(document).ready(function(){$("#
除了jquery,本插件还引用了UI库,包括ui.draggable.jsImageCropper演示需要asp.net支持。测试通过ImageCropper下