测试测试测试测试

hsapphire

浏览: 15644 次
性别:
来自: 上海

最近访客更多访客>>

zqznew

anshiyatai

heiye24

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (20)

社区版块

存档分类

jQuery Ajax CSS MVC 脚本

前不久在网络上看见一个很不错的<A HREF="HTTP://WWW.DATATABLES.NET/" TARGET=_BLANK>JQUERY的DATATABLE表格插件</A>。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下，推荐该插件的原因。在项目中我使用J<A HREF="HTTP://WWW.TRIRAND.COM/BLOG/" TARGET=_BLANK>QGRID</A>比较多。但是发现当进行样式调整时JQGRID的样式常常会让美工头疼。而DATATABLE插件却是一个轻量级的JQUERY插件。当我通过浏览器查看该JS插件RANDER后的源码。发现只是一个简单的HTML TABLE，非常简洁。那么在没有特殊要求的情况下使用这个插件，开发人员JS脚本的可维护性将得到简化，美工的样式调整也会变得更轻松！下面介绍如何在MVC3.0中使用DATATABLE JQUERY插件。
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 一、DATATABLE JS 核心脚本文件、 CSS文件及图片
<HR>

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 请到<A HREF="HTTP://WWW.DATATABLES.NET/DOWNLOAD/" TARGET=_BLANK>这里</A>下载最新的版本的DATATABLE插件。该插件内附上了具体的官方DEMO。读者可自行阅读，这里只介绍这个插件的核心文件
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 1.JQUERY.DATATABLES.MIN.JS
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 压缩后的核心JS文件
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 2.官方提供的CSS文件
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; DEMO_PAGE.CSS 、DEMO_TABLE.CSS、 DEMO_TABLE_JUI.CSS
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 可以自定义CSS样式来满足客户需求。
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 3.图片文件
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 包含一个IMAGES文件夹，请将该文件请全部拷贝到MVC工程的指定目录，截图如下：
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; <IMG SRC="HTTP://PIC002.CNBLOGS.COM/IMAGES/2011/102419/2011021720192413.PNG">
&NBSP;&NBSP;&NBSP;&NBSP; 二、DATATABLE 客户端HTML及JS代码
<HR>

HTML代码 
<DIV CLASS=CNBLOGS_CODE><PRE><DIV>&LT;TABLE ID="MYDATATABLE" CLASS="DISPLAY"&GT; &LT;THEAD&GT; &LT;TR&GT; &LT;TH&GT; 标识 &LT;/TH&GT; &LT;TH&GT; 公司名称 &LT;/TH&GT; &LT;TH&GT; 地址 &LT;/TH&GT; &LT;TH&GT; 城市 &LT;/TH&GT; &LT;/TR&GT; &LT;/THEAD&GT; &LT;TBODY&GT; &LT;/TBODY&GT; &LT;/TABLE&GT; &LT;INPUT TYPE="BUTTON" ID="BTNTEST" VALUE="根据条件重新响应后台AJAX" /&GT;</DIV></PRE></DIV>JS代码 
<DIV CLASS=CNBLOGS_CODE><PRE><DIV> &LT;SCRIPT TYPE="TEXT/JAVASCRIPT"&GT; VAR TBL; $(FUNCTION () { TBL = $('#MYDATATABLE').DATATABLE({ "BSERVERSIDE": TRUE, "SAJAXSOURCE": "HOME/AJAXHANDLER", //MVC后台AJAX调用接口。 'BPAGINATE': TRUE, //是否分页。 "BPROCESSING": TRUE, //当DATATABLE获取数据时候是否显示正在处理提示信息。 'BFILTER': FALSE, //是否使用内置的过滤功能。 'BLENGTHCHANGE': TRUE, //是否允许用户自定义每页显示条数。 'SPAGINATIONTYPE': 'FULL_NUMBERS', //分页样式 "AOCOLUMNS": [ { "SNAME": "ID", "BSEARCHABLE": FALSE, "BSORTABLE": FALSE, "FNRENDER": FUNCTION (OOBJ) { RETURN '&LT;A HREF=\"DETAILS/' + OOBJ.ADATA[0] + '\"&GT;VIEW&LT;/A&GT;'; } //自定义列的样式 }, { "SNAME": "COMPANY_NAME" }, { "SNAME": "ADDRESS" }, { "SNAME": "TOWN" } ] }); //AJAX重新LOAD控件数据。（SERVER端） $("#BTNTEST").CLICK(FUNCTION () { VAR OSETTINGS = TBL.FNSETTINGS(); OSETTINGS.SAJAXSOURCE = "HOME/AJAXHANDLER2"; ALERT(OSETTINGS.SAJAXSOURCE); TBL.FNCLEARTABLE(0); TBL.FNDRAW(); }); }); &LT;/SCRIPT&GT;</DIV></PRE></DIV>
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 三、 MVC 服务端AJAX相关代码
<HR>

&NBSP;DATATABLE AJAX响应参数类
<DIV CLASS=CNBLOGS_CODE><PRE><DIV> PUBLIC CLASS DATATABLEPARAMETER { /// &LT;SUMMARY&GT; /// DATATABLE请求服务器端次数 /// &LT;/SUMMARY&GT; PUBLIC STRING SECHO { GET; SET; } /// &LT;SUMMARY&GT; /// 过滤文本 /// &LT;/SUMMARY&GT; PUBLIC STRING SSEARCH { GET; SET; } /// &LT;SUMMARY&GT; /// 每页显示的数量 /// &LT;/SUMMARY&GT; PUBLIC INT IDISPLAYLENGTH { GET; SET; } /// &LT;SUMMARY&GT; /// 分页时每页跨度数量 /// &LT;/SUMMARY&GT; PUBLIC INT IDISPLAYSTART { GET; SET; } /// &LT;SUMMARY&GT; /// 列数 /// &LT;/SUMMARY&GT; PUBLIC INT ICOLUMNS { GET; SET; } /// &LT;SUMMARY&GT; /// 排序列的数量 /// &LT;/SUMMARY&GT; PUBLIC INT ISORTINGCOLS { GET; SET; } /// &LT;SUMMARY&GT; /// 逗号分割所有的列 /// &LT;/SUMMARY&GT; PUBLIC STRING SCOLUMNS { GET; SET; } }</DIV></PRE></DIV>
接着使用MVC的 MODELBINDER将ACTION参数实体化
<DIV CLASS=CNBLOGS_CODE><PRE><DIV> PUBLIC JSONRESULT AJAXHANDLER(DATATABLEPARAMETER PARAM) { RETURN JSON(NEW { SECHO = PARAM.SECHO, ITOTALRECORDS = 50, ITOTALDISPLAYRECORDS = 50, AADATA = NEW LIST&LT;OBJECT&GT; { NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[] {"1","公司信息","地址信息","城市信息"}, NEW STRING[]{"1","公司信息","地址信息","城市信息"} } }, JSONREQUESTBEHAVIOR.ALLOWGET); }</DIV></PRE></DIV>
&NBSP;&NBSP;&NBSP; 四、程序截图
<HR>
<IMG SRC="HTTP://PIC002.CNBLOGS.COM/IMAGES/2011/102419/2011021721512352.PNG">

生成HTML代码如下
<DIV CLASS=CNBLOGS_CODE ONCLICK="CNBLOGS_CODE_SHOW('50D5727D-7206-42F0-A3E7-0AD65A209D73')"><IMG STYLE="DISPLAY: NONE" ID=CODE_IMG_CLOSED_50D5727D-7206-42F0-A3E7-0AD65A209D73 CLASS=CODE_IMG_CLOSED SRC="HTTP://IMAGES.CNBLOGS.COM/OUTLININGINDICATORS/CONTRACTEDBLOCK.GIF" JQUERY1298527006425="4"><IMG ID=CODE_IMG_OPENED_50D5727D-7206-42F0-A3E7-0AD65A209D73 CLASS=CODE_IMG_OPENED ONCLICK="CNBLOGS_CODE_HIDE('50D5727D-7206-42F0-A3E7-0AD65A209D73',EVENT)" SRC="HTTP://IMAGES.CNBLOGS.COM/OUTLININGINDICATORS/EXPANDEDBLOCKSTART.GIF">生成 HTML 代码
<DIV STYLE="DISPLAY: BLOCK" ID=CNBLOGS_CODE_OPEN_50D5727D-7206-42F0-A3E7-0AD65A209D73 CLASS=CNBLOGS_CODE_HIDE JQUERY1298527006425="3"><PRE><DIV>&LT;TABLE ID="MYDATATABLE" CLASS="DISPLAY"&GT; &LT;THEAD&GT; &LT;TR&GT; &LT;TH STYLE="WIDTH: 239PX;" CLASS="SORTING_DISABLED"&GT; 标识 &LT;/TH&GT; &LT;TH STYLE="WIDTH: 366PX;" CLASS="SORTING"&GT; 公司名称 &LT;/TH&GT; &LT;TH STYLE="WIDTH: 239PX;" CLASS="SORTING"&GT; 地址 &LT;/TH&GT; &LT;TH STYLE="WIDTH: 239PX;" CLASS="SORTING"&GT; 城市 &LT;/TH&GT; &LT;/TR&GT; &LT;/THEAD&GT; &LT;TBODY&GT;&LT;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="ODD"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;TR CLASS="EVEN"&GT;&LT;TD CLASS=" SORTING_1"&GT;&LT;A HREF="DETAILS/1"&GT;VIEW&LT;/A&GT;&LT;/TD&GT;&LT;TD&GT;公司信息&LT;/TD&GT;&LT;TD&GT;地址信息&LT;/TD&GT;&LT;TD&GT;城市信息&LT;/TD&GT;&LT;/TR&GT;&LT;/TBODY&GT;&LT;/TABLE&GT;</DIV></PRE></DIV></DIV>

分享到：