很抱歉，之前寝室光纤断了，所以到现在才更新这个系列的第二篇博客。点击访问高校手机签到系统——第一部分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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 |
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：
|
1
2
3
4
5
6
7
8
9 |
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(); } |
前端值得分享的也就这些了，上次说的源码问题，我想了想还是在本系列文章完成的时候开源，涉及到论文查重的问题，谨慎！！！有疑问或建议，请留言。
高校手机签到系统——第一部分Authority权限系统（下）,布布扣,bubuko.com
高校手机签到系统——第一部分Authority权限系统（下）
原文：http://www.cnblogs.com/DKSL/p/3570067.html