高校手机签到系统——第一部分Authority权限系统（下）

　　很抱歉，之前寝室光纤断了，所以到现在才更新这个系列的第二篇博客。点击访问高校手机签到系统——第一部分Authority权限系统（上）

　　这几天我反思了一下上一篇写博上的方式，一味的贴代码式的，是否应该更深入细致的讲解一下具体的某个方法的实现。在写博上我还是个新人，还忘多多指教。

　　上一篇，我们完成了后台部分。今天我们再来讨论讨论前台。在具体到前台之前，还必须说到一层

Service层，该层主要实现前端和后台的解耦。我们小小的举例一下：

先定义接口ClassSvc封装ClassDao中对Class班级类的增删查改方法，在Impl中

完成了对该接口的具体实现，这里体现到一种设计模式思想，装饰者模式。bla,bla,bla,Dao层其他的封装类似。如何调用Service来达到解耦的目的？这里采用构造注入的方式：

 

　　具体到前台：

　　先看一看前台的效果:

　　

好丑是吧，我确实不擅长前端的美化。左边是一个Ztree,中间有一个IdTab选项卡包着jqgrid,它们都是jquery的控件，它们怎么使用？请看下文。

ztree初始化：

Ztree是一个国产Jquery控件，官方的使用说明已经很细致了，请参考http://www.ztree.me/v3/main.php.

请求json数据，原来我是用JavaScriptSerializer序列化一个json格式的字符串，注意是字符串，也就是下面json格式的数据双引号全被转义了，如果android请求得到了这样的数据，没法解析。用var定义，最后响应的就是如下的数据。

[{"id":"8b012030-572a-4d34-8438-11ec0dd3854f","name":"直属业务部门","pId":"00000000-0000-0000-0000-000000000000","type":"机构","isParent":true},{"id":"d2305fdd-d666-4e04-8ac3-47c4de269f68","name":"教学部门","pId":"00000000-0000-0000-0000-000000000000","type":"机构","isParent":true},{"id":"9d7e2284-c3af-439c-83dc-49794ee057f0","name":"党群部门","pId":"00000000-0000-0000-0000-000000000000","type":"机构","isParent":true},{"id":"0e2a1b1e-f067-4925-87bb-61744194ca9c","name":"行政机构","pId":"00000000-0000-0000-0000-000000000000","type":"机构","isParent":true}]

jqgrid：

jQuery("#list1").jqGrid({
             rowNum: 15,
             url: '/Authority/LoadAllStuffs',
             mtype: 'POST',
             datatype: "json",
             colNames: ['PageIndex', 'UserId', 'No', 'Name', 'Gender', 'Nation', 'Address', 'PoliticalStatus', 'CellPhoneNumber'],
             colModel: [
                    { name: 'PageIndex', width: 20 },
                    { name: 'UserId', hidden: true },
   		            { name: 'No', width: 60 },
   		            { name: 'Name', width: 70 },
   		            { name: 'Gender', width: 20, formatter: function (cellvalue, options, rowObject) { if (cellvalue == 'True') { return '男'; } else if (cellvalue == 'False') { return '女'; } else { return ''; } } },
   		            { name: 'Nation', width: 70, align: "left" },
   		            { name: 'Address', width: 130, align: "left" },
   		            { name: 'PoliticalStatus', width: 50, align: "center" },
   		            { name: 'CellPhoneNumber', width: 80, sortable: false }
   	            ],
             jsonReader: {
                 root: 'dataRows', page: 'CurrentPage', total: 'PageCount', records: 'RecordCount', repeatitems: true, cell: 'cell'
             },
             sortname: 'PageIndex',
             rowList: [10, 20, 30],
             pager: '#pager1',
             viewrecords: true,
             caption: "AllStuffs",
             width: 600,
             multiselect: true
         });

 模态窗口jqmodal：

 var addBranchDialog = $('#AddBranchDialog');
                 if (nodes[0].type != "专业") {
                     $('#AddBranchDialog').jqm({ ajax: '/Authority/AddBranch?id=' + nodes[0].id, modal: true });                     
                 }
                 else {
                     $('#AddBranchDialog').jqm({ ajax: '/Authority/AddClass?id=' + nodes[0].id, modal: true });　　//初始化模态窗口要异步请求的链接
                 }
                 $('#AddBranchDialog').jqmShow();
             }

 前端值得分享的也就这些了，上次说的源码问题，我想了想还是在本系列文章完成的时候开源，涉及到论文查重的问题，谨慎！！！有疑问或建议，请留言。