Index.cshtml 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. @{
  2. ViewBag.Title = "系统功能";
  3. Layout = "~/Views/Shared/_LayoutIndex.cshtml";
  4. }
  5. <script>
  6. $(function () {
  7. InitialPage();
  8. GetTree();
  9. GetGrid();
  10. });
  11. //初始化页面
  12. function InitialPage() {
  13. //layout布局
  14. $('#layout').layout({
  15. applyDemoStyles: true,
  16. onresize: function () {
  17. $(window).resize()
  18. }
  19. });
  20. //resize重设(表格、树形)宽高
  21. $(window).resize(function (e) {
  22. window.setTimeout(function () {
  23. $('#gridTable').setGridWidth(($('.gridPanel').width()));
  24. $("#gridTable").setGridHeight($(window).height() - 141.5);
  25. $("#itemTree").setTreeHeight($(window).height() - 52);
  26. }, 200);
  27. e.stopPropagation();
  28. });
  29. }
  30. //加载树
  31. var _parentId = "";
  32. function GetTree() {
  33. var item = {
  34. height: $(window).height() - 52,
  35. url: "../../AuthorizeManage/Module/GetTreeJson",
  36. onnodeclick: function (item) {
  37. _parentId = item.id;
  38. $('#btn_Search').trigger("click");
  39. }
  40. };
  41. //初始化
  42. $("#itemTree").treeview(item);
  43. }
  44. //加载表格
  45. function GetGrid() {
  46. var selectedRowIndex = 0;
  47. var $gridTable = $('#gridTable');
  48. $gridTable.jqGrid({
  49. url: "../../AuthorizeManage/Module/GetListJson?parentid=0",
  50. datatype: "json",
  51. height: $(window).height() - 141.5,
  52. autowidth: true,
  53. colModel: [
  54. { label: "主键", name: "ModuleId", index: "ModuleId", hidden: true },
  55. { label: "编号", name: "EnCode", index: "EnCode", width: 150, align: "left" },
  56. { label: "名称", name: "FullName", index: "FullName", width: 150, align: "left" },
  57. { label: "地址", name: "UrlAddress", index: "UrlAddress", width: 350, align: "left" },
  58. { label: "目标", name: "Target", index: "Target", width: 60, align: "center" },
  59. {
  60. label: "菜单", name: "IsMenu", index: "IsMenu", width: 50, align: "center",
  61. formatter: function (cellvalue, options, rowObject) {
  62. return cellvalue == 1 ? "<i value=" + cellvalue + " class=\"fa fa-toggle-on\"></i>" : "<i value=" + cellvalue + " class=\"fa fa-toggle-off\"></i>";
  63. }
  64. },
  65. {
  66. label: "展开", name: "AllowExpand", index: "AllowExpand", width: 50, align: "center",
  67. formatter: function (cellvalue, options, rowObject) {
  68. return cellvalue == 1 ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>";
  69. }
  70. },
  71. {
  72. label: "公共", name: "IsPublic", index: "IsPublic", width: 50, align: "center",
  73. formatter: function (cellvalue, options, rowObject) {
  74. return cellvalue == 1 ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>";
  75. }
  76. },
  77. {
  78. label: "有效", name: "EnabledMark", index: "EnabledMark", width: 50, align: "center",
  79. formatter: function (cellvalue, options, rowObject) {
  80. return cellvalue == 1 ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>";
  81. }
  82. },
  83. { label: "描述", name: "Description", index: "Description", width: 100, align: "left" }
  84. ],
  85. pager: false,
  86. rowNum: "1000",
  87. rownumbers: true,
  88. shrinkToFit: false,
  89. gridview: true,
  90. onSelectRow: function () {
  91. selectedRowIndex = $("#" + this.id).getGridParam('selrow');
  92. },
  93. gridComplete: function () {
  94. $("#" + this.id).setSelection(selectedRowIndex, false);
  95. }
  96. });
  97. //查询条件
  98. $("#queryCondition .dropdown-menu li").click(function () {
  99. var text = $(this).find('a').html();
  100. var value = $(this).find('a').attr('data-value');
  101. $("#queryCondition .dropdown-text").html(text).attr('data-value', value)
  102. });
  103. //查询事件
  104. $("#btn_Search").click(function () {
  105. $gridTable.jqGrid('setGridParam', {
  106. url: "../../AuthorizeManage/Module/GetListJson",
  107. postData: {
  108. parentid: _parentId,
  109. condition: $("#queryCondition").find('.dropdown-text').attr('data-value'),
  110. keyword: $("#txt_Keyword").val()
  111. }
  112. }).trigger('reloadGrid');
  113. });
  114. //查询回车
  115. $('#txt_Keyword').bind('keypress', function (event) {
  116. if (event.keyCode == "13") {
  117. $('#btn_Search').trigger("click");
  118. }
  119. });
  120. }
  121. //新增
  122. function btn_add() {
  123. dialogOpen({
  124. id: "Form",
  125. title: '添加功能',
  126. url: '/AuthorizeManage/Module/Form?parentId=' + _parentId,
  127. width: "700px",
  128. height: "430px",
  129. btn: null
  130. });
  131. };
  132. //编辑
  133. function btn_edit() {
  134. var keyValue = $("#gridTable").jqGridRowValue("ModuleId");
  135. if (checkedRow(keyValue)) {
  136. dialogOpen({
  137. id: "Form",
  138. title: '编辑功能',
  139. url: '/AuthorizeManage/Module/Form?keyValue=' + keyValue,
  140. width: "700px",
  141. height: "430px",
  142. btn: null
  143. });
  144. }
  145. }
  146. //删除
  147. function btn_delete() {
  148. var keyValue = $("#gridTable").jqGridRowValue("ModuleId");
  149. if (keyValue) {
  150. $.RemoveForm({
  151. url: "../../AuthorizeManage/Module/RemoveForm",
  152. param: { keyValue: keyValue },
  153. success: function (data) {
  154. $("#gridTable").trigger("reloadGrid");
  155. }
  156. })
  157. } else {
  158. dialogMsg('请选择需要删除的数据项!', 0);
  159. }
  160. }
  161. </script>
  162. <div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
  163. <div class="ui-layout-west">
  164. <div class="west-Panel">
  165. <div class="panel-Title">功能目录</div>
  166. <div id="itemTree"></div>
  167. </div>
  168. </div>
  169. <div class="ui-layout-center">
  170. <div class="center-Panel">
  171. <div class="panel-Title">功能信息</div>
  172. <div class="titlePanel">
  173. <div class="title-search">
  174. <table>
  175. <tr>
  176. <td>
  177. <div id="queryCondition" class="btn-group">
  178. <a class="btn btn-default dropdown-text" data-toggle="dropdown">选择条件</a>
  179. <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
  180. <ul class="dropdown-menu">
  181. <li><a data-value="EnCode">编号</a></li>
  182. <li><a data-value="FullName">名称</a></li>
  183. <li><a data-value="UrlAddress">地址</a></li>
  184. </ul>
  185. </div>
  186. </td>
  187. <td style="padding-left: 2px;">
  188. <input id="txt_Keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 200px;" />
  189. </td>
  190. <td style="padding-left: 5px;">
  191. <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;查询</a>
  192. </td>
  193. </tr>
  194. </table>
  195. </div>
  196. <div class="toolbar">
  197. <div class="btn-group">
  198. <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
  199. <a id="lr-add" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i>&nbsp;新增</a>
  200. <a id="lr-edit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
  201. <a id="lr-delete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
  202. </div>
  203. <script>$('.toolbar').authorizeButton()</script>
  204. </div>
  205. </div>
  206. <div class="gridPanel">
  207. <table id="gridTable"></table>
  208. </div>
  209. </div>
  210. </div>
  211. </div>