首页 web前端 html教程 我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面_html/css_WEB-ITnose

我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面_html/css_WEB-ITnose

Jun 24, 2016 am 11:52 AM

一、前言

“尼玛哥,上周你教我改了下OA系统UI,黄总看了很满意呀。”
“不错不错,看来小美进步很大,可以提前结束试用期,到时候加工资别忘了请我吃饭呀!”
“尼玛哥,你有女朋友了吗?”

“小美,这样不好吧,虽然我很优秀,你也很不错,但是我不是因为对你有企图才教你写程序呀!当然你执意要这样的话,我也只好从了你啦。”

“尼玛哥,你老人家想多了,我只是想告诉你,像你这么小气还让女孩子请吃饭,能交到女朋友才怪。对啦,我们OA系统以前是.net WebForm的,里面的表格都是gridview的,MVC里我都没找到,这个怎么办呀?”

“嗯,gridview是个服务器控制,没办法直接在视图里面用,而且用服务器控件用户体验也不好,这次教你个新玩意儿,用jqgrid吧。jqgrid是个js开源的表格插件,轻量级,好控制,效果也很不错。给你看下官网和我在其它项目中的使用效果”

Jqgrid官网: http://www.trirand.com/blog/

“尼玛哥,搞什么鬼呀,本来很好看的界面,你打什么马塞克呀,你不知道马塞克严重影响到了人类的进步吗?”

“小美,不要在意这些细节,博客园是大家学习知识的地方,所以呢我把有关公司的一些东西打了点码。重点是在于和大家一起学技术,你看人家Teacher苍,哪部电影没打码,人家不照样红。”

二、Jqgrid在MVC中的使用

“尼玛哥,jqgrid是个js插件,要怎么样才以跟MVC结合起来使用呢?”

“小美,光说你可能不理解,我来举个栗子,教你做一项基础资料,做个‘部门管理’,然后一步步跟你来讲我是怎么把jqgrid插到你的MVC中去的。”

“用Jqgrid来展示数据其实很简单,引入这个插件以后,我们只需塞给它一个Json数据包,马上一个漂亮的数据列表就可以展现在我们面前。"

“尼玛哥,我昨天查了下MVC,它其实就是model、View、Control,model是实体,View是来显示数据的,Control主要控制前后台的交互;那这个Jqgrid插件应该就是放在View上的吧。”

“聪明,本来我还想着怎么来跟你解释下,你自己先预习了,不错呀,小美。好了,前戏来过了,我们正式开撸吧。”

“尼玛哥,Model我直接用代码生成器给生成了,然后我觉得控制器应该是从后台取到部门列表,然后转换成Json传给前台,代码仿照你上次教我写菜单Json那样写的,你看看可以不。”

/// <summary>    /// 部门管理控制器    /// </summary>    public class DepartmentController : PublicController<base_department>    {        Base_DepartmentBll base_departmentbll = new Base_DepartmentBll();        /// <summary>        /// 【部门管理】返回列表JONS        /// </summary>        /// <returns></returns>        public ActionResult GridListJson(JqGridParam jqgridparam)        {            DataTable ListData = base_departmentbll.GetList(ref jqgridparam);            return Content(ListData.ToJson());        }    }    /// <summary>    /// 部门管理    /// <author>    ///        <name>she</name>    ///        <date>2014.08.07 12:34</date>    /// </author>    /// </summary>    public class Base_DepartmentBll : RepositoryFactory<base_department>    {            /// <summary>        /// 获取部门 列表        /// </summary>        /// <param name="jqgridparam">        /// <returns></returns>        public DataTable GetList( ref JqGridParam jqgridparam)        {            StringBuilder strSql = new StringBuilder();            strSql.Append(@"SELECT  *                            FROM    ( SELECT    d.DepartmentId ,            --主键                                                c.FullName AS CompanyName ,    --所属公司                                                d.CompanyId ,                --所属公司Id                                                d.Code ,                    --编码                                                d.FullName ,                --部门名称                                                d.ShortName ,                --部门简称                                                d.Nature ,                    --部门性质                                                d.Manager ,                    --负责人                                                d.Phone ,                    --电话                                                d.Fax ,                        --传真                                                d.Enabled ,                    --有效                                                d.SortCode,                 --排序吗                                                d.Remark                    --说明                                      FROM      Base_Department d                                                LEFT JOIN Base_Company c ON c.CompanyId = d.CompanyId                                    ) T WHERE 1=1 ");            List<dbparameter> parameter = new List<dbparameter>();            return Repository().FindTablePageBySql(strSql.ToString(), parameter.ToArray(), ref jqgridparam);            return Repository().FindTableBySql(strSql.ToString(), parameter.ToArray());        }    }</dbparameter></dbparameter></base_department></base_department>
登录后复制

“不错呀,学习能力很强,小美你这点很像我呀!”
“尼玛哥,那个GetList函数里有个 ref JqGridParam jqgridparam参数,我是照抄过来的,那个参数有什么用呢?”

“小美,你看下最后调的那个方法FindTablePageBySql,里面都有Page这单词,明显是分页用的。还有了,你现在也能看懂不少代码了,遇到这类公用方法别光知道调用,自己也F12跳进去看看,对你学开发很有帮助呀。”

“好了,View层的代码我来教你写,其实我也是从官方Demo那里学的。以后你也别光看日语电影了,欧美系列的也看看,以后就能看懂英文文档,对你提高技术有帮助的。”

@{    ViewBag.Title = "部门管理";}<!--框架必需start--><link href="~/Content/Styles/learunui-framework.css" rel="stylesheet"><script src="~/Content/Scripts/jquery/jquery-1.8.2.min.js"></script><script src="~/Content/Scripts/learunui-framework.js"></script><!--框架必需end--><!--jqgrid表格组件start--><script src="~/Content/Scripts/jqgrid/jquery-ui-custom.min.js"></script><script src="~/Content/Scripts/jqgrid/grid.locale-cn.js"></script><link href="~/Content/Scripts/jqgrid/css/jqgrid.css" rel="stylesheet"><script src="~/Content/Scripts/jqgrid/jqGrid.js"></script><!--表格组件end--><link href="~/Content/Scripts/tree/tree.css" rel="stylesheet"><script src="~/Content/Scripts/tree/tree.js"></script><script type="text/javascript">    $(document).ready(function () {        GetGrid("");    });    //加载表格    function GetGrid(CompanyId) {        $("#gridTable").jqGrid({            url: "/Department/GridListJson",            datatype: "json",            height: $(window).height() - 105,            autowidth: true,            colModel: [                { label: '主键', name: 'departmentid', index: "departmentid", hidden: true },                { label: '编码', name: 'code', index: "code", width: 80 },                { label: '部门', name: 'fullname', index: "fullname", width: 100 },                { label: '简称', name: 'shortname', index: "shortname", width: 100 },                { label: '性质', name: 'nature', index: "nature", width: 100, align: "center" },                { label: '负责人', name: 'manager', index: "manager", width: 80, align: "center" },                { label: '电话', name: 'phone', index: "phone", width: 100, align: "center" },                { label: '传真', name: 'fax', index: "fax", width: 100, align: "center" },                { label: '所属公司', name: 'companyname', index: "companyname", width: 120 },                {                    label: '有效', name: 'enabled', index: 'enabled', width: 45, align: 'center',                    formatter: function (cellvalue, options, rowObject) {                        if (cellvalue == '1') return "<img  src='/Content/Images/checkokmark.gif'/ alt="我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面_html/css_WEB-ITnose" >";                        if (cellvalue == '0') return "<img  src='/Content/Images/checknomark.gif'/ alt="我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面_html/css_WEB-ITnose" >";                    }                },                { label: '说明', name: 'remark', index: "remark", width: 300 }            ],            pager: "#gridPager",            sortname: 'SortCode',            sortorder: 'asc',            rownumbers: true,            shrinkToFit: false,            gridview: true,        });    }</script><div id="layout" class="layout">    <div class="layoutPanel layout-center">        <div class="btnbartitle">            <div>                部门列表<span id="CenterTitle"></span>            </div>        </div>        <table id="gridTable"></table>        <div id="gridPager"></div>    </div>
</div>
登录后复制

“尼玛哥,你以前跟我讲前后台交互要用AV技术的,这边怎么就没看到Ajax调用的痕迹呢?”

“小美,你又傻了吧,你看羞羞小电影的时候难道还在办公室这种公司场所看,肯定是找个地方躲起来偷偷看,Jqgrid是个插件,它当然是封装了一下,你看那里有个URL参数,我把它指向你控制器里获取Json的Action,这样Jqgrid就能获得返回的Json了。”

“哦,原来是他们封装了东西,那gridPager这个分页的东西,肯定也是后台封装了东西,不然根本跟列表联系不上。”

“对,小美很聪明,这东西是开源的,有时间你也去看一下,对你以后用这插件也会有帮助的,源码还是放百度网盘的,你自己去下。”

源码下载地址:http://pan.baidu.com/s/1gdiVKJp

“尼玛哥,你给我的源码里怎么跟上面的图片有点不一样,左侧的公司树怎么不见了?工具栏也没有。”

“小美,我都跟你说了,一步步,慢慢来,你先把这个表格弄好了,下周再教你剩下的。”

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

&lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? 我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

See all articles