应用背景

理由:jquery简单,兼容性好且容易封装。废话不多说,马上开始我们的Jquery插件编写吧。应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式。

单体模式(singleton)

当用户需要某项功能时要填写一些表单信息,在填写完成并提交后,该部分信息是不允许再次修改的。表单包含TextBox、DropDownList、CheckBox等控件。

需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现)。

单体是在脚本加载时创建的,能将一系列有关联的变量和方法组织为一个逻辑单元,逻辑单元里面的内容通过单一的变量进行访问;

需求实现
第一种方案,绑定用户填写的数据时,设置控件的Enable属性为False。如果页面的表单数较少时可采用这样的方法,但是如果在表单较多的情况下则并不是更好的方法。

使用到技术:asp.net2.0, jquery,css

一个单体主要分为三部分

第二种方案,使用Foreach访问页面控件,判断类型如果是TextBox、DropDownList、CheckBox等,则设置Enable=False。代码量相比第一种方案有所减少,但,仍不是最佳的。

首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷。

用于访问内部信息的入口变量(如:Sky)
属性(如:nickName/age/timeInfo)
方法(如:sayHello)

第三种方案,使用Jquery即可轻松实现。

复制代码 代码如下:

**基本结构

复制代码 代码如下:

$.ajax({
type: p.method,
url: p.url,
data:param,
success: function(msg){
$.AddData(msg,showbox,p);
},
error: function(msg){$.ErrorAjax(showbox,p.errorMsg);},
beforeSend:function(){$.AddLoading(showbox);},
complete:function(){$.MoveLoading(showbox);}
});

**

$(“input”).attr(“disabled”, “disabled”);

看了就这么简单的一句,jquery就是比较爽的。具体的代码请下载下面的附件查看哦。

复制代码 代码如下:

总结
要实现同样的功能有很多种方法,如何在特定场景中能找到更快捷更适合的那一种,这才是我们所想的。

先发张生成后结果图来看看(样式不是很好看,需要的自己掂量着修改吧)

var Sky = {

当用户需要某项功能时要填写一些表单信息,在填写完成并提交后,该部分信息是不允许再次修改的。表单包含TextBox、DropDownLi…

 图片 1

/*
* 作用一,变量管理
*/

排序和过滤功能

nickName: “sky”,
age: “26”,

图片 2

/*
* 作用二,加载中初始化变量
* 在加载过程中执行并初始化Sky.info
*/

jquery+ashx的无刷新分页功能

timeInfo: function()
    {
var _year = new Date().getFullYear();
return _year;
}(),

图片 3

/*
* 作用三,函数管理,让你的函数看起来不再那么散乱
*/

其实这里除了jquery充当整个插件的主要架构外,另外一个重要的文件就是ashx这个一般处理文件啦。ashx在我整个jqueryGrid插件中输出{\n
page:1,\ntotal:0,pages:1,rows:”,cols:”}这样的json代码,相信用过josn的朋友都明白。其中为了减少错误我用了一个第三方插件Newtonsoft.Json,这是格式化json字符串的JsonConvert.DeserializeObject()这个函数就是啦。

sayHello: function()
    {
alert(“hello,world!”);
}

当然该功能插件之适合用于web应用程序和内部网站中,对于网站来说有些不适合,毕竟从SEO角度来讲jquery直接生成的数据是不是很好的显示方式。不多说了,大家可以看看我的代码,如果对该插件有更好的建议或者修改欢迎交流。
jquery+ashx无刷新GridView数据显示插件下载

}
//所有内部信息通过Sky这个变量进行访问;
alert(Sky.timeInfo);

以下是更详细的说明,看完了这篇文章,相信你应该差不多了解了,网上好多高手的js写法了,单体模式很常用。

单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象,如果他可以被实例化,那么他只能被实例化一次。
单体模式是javascript里面最基本但也是最有用的模式之一。
特点:

发表评论

电子邮件地址不会被公开。 必填项已用*标注