一、前言
“尼玛哥,上周你教我改了下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那样写的,你看看可以不。”
/// /// 部门管理控制器 /// public class departmentcontroller : publiccontroller { base_departmentbll base_departmentbll = new base_departmentbll(); /// /// 【部门管理】返回列表jons /// /// public actionresult gridlistjson(jqgridparam jqgridparam) { datatable listdata = base_departmentbll.getlist(ref jqgridparam); return content(listdata.tojson()); } } /// /// 部门管理 /// /// she /// 2014.08.07 12:34 /// /// public class base_departmentbll : repositoryfactory { /// /// 获取部门 列表 /// /// /// 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 parameter = new list(); return repository().findtablepagebysql(strsql.tostring(), parameter.toarray(), ref jqgridparam); return repository().findtablebysql(strsql.tostring(), parameter.toarray()); } }
“不错呀,学习能力很强,小美你这点很像我呀!”
“尼玛哥,那个getlist函数里有个 ref jqgridparam jqgridparam参数,我是照抄过来的,那个参数有什么用呢?”
“小美,你看下最后调的那个方法findtablepagebysql,里面都有page这单词,明显是分页用的。还有了,你现在也能看懂不少代码了,遇到这类公用方法别光知道调用,自己也f12跳进去看看,对你学开发很有帮助呀。”
“好了,view层的代码我来教你写,其实我也是从官方demo那里学的。以后你也别光看日语电影了,欧美系列的也看看,以后就能看懂英文文档,对你提高技术有帮助的。”
@{ viewbag.title = 部门管理;}; if (cellvalue == '0') return ; } }, { label: '说明', name: 'remark', index: remark, width: 300 } ], pager: #gridpager, sortname: 'sortcode', sortorder: 'asc', rownumbers: true, shrinktofit: false, gridview: true, }); } 部门列表
“尼玛哥,你以前跟我讲前后台交互要用av技术的,这边怎么就没看到ajax调用的痕迹呢?”
“小美,你又傻了吧,你看羞羞小电影的时候难道还在办公室这种公司场所看,肯定是找个地方躲起来偷偷看,jqgrid是个插件,它当然是封装了一下,你看那里有个url参数,我把它指向你控制器里获取json的action,这样jqgrid就能获得返回的json了。”
“哦,原来是他们封装了东西,那gridpager这个分页的东西,肯定也是后台封装了东西,不然根本跟列表联系不上。”
“对,小美很聪明,这东西是开源的,有时间你也去看一下,对你以后用这插件也会有帮助的,源码还是放百度网盘的,你自己去下。”
源码下载地址:http://pan.baidu.com/s/1gdivkjp
“尼玛哥,你给我的源码里怎么跟上面的图片有点不一样,左侧的公司树怎么不见了?工具栏也没有。”
“小美,我都跟你说了,一步步,慢慢来,你先把这个表格弄好了,下周再教你剩下的。”