org-list.jsp 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>组织机构信息列表</title>
  6. <!--框架必需start-->
  7. <script type="text/javascript" src="${ctx}/qui/libs/js/jquery.js"></script>
  8. <script type="text/javascript" src="${ctx}/qui/libs/js/framework.js"></script>
  9. <link href="${ctx}/qui/libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
  10. <link rel="stylesheet" type="text/css" id="skin" prePath="${ctx}/qui/"/>
  11. <link rel="stylesheet" type="text/css" id="customSkin"/>
  12. <!--框架必需end-->
  13. <!--数据表格start-->
  14. <script src="${ctx}/qui/libs/js/table/quiGrid.js" type="text/javascript"></script>
  15. <!--数据表格end-->
  16. <!--箭头分页start-->
  17. <script type="text/javascript" src="${ctx}/qui/libs/js/nav/pageArrow.js"></script>
  18. <!--箭头分页end-->
  19. <!--表单异步提交start-->
  20. <script src="${ctx}/qui/libs/js/form/form.js" type="text/javascript"></script>
  21. <!--表单异步提交end-->
  22. <!-- 树组件start -->
  23. <script type="text/javascript" src="${ctx}/qui/libs/js/tree/ztree/ztree.js"></script>
  24. <link type="text/css" rel="stylesheet" href="${ctx}/qui/libs/js/tree/ztree/ztree.css"></link>
  25. <!-- 树组件end -->
  26. <script type="text/javascript">
  27. var g_pageNo = 1;
  28. var g_pageSize = 10;
  29. var parentId=0;
  30. //数据表格使用
  31. var g;
  32. var gridData;
  33. function initComplete(){
  34. g = $("#maingrid").quiGrid({
  35. columns: [
  36. { display: '组织名称', name: 'orgName', align: 'center', width: "20%"},
  37. { display: '描述', name: 'orgDesc', align: 'center', width: "30%"},
  38. { display: '状态', name: 'state', align: 'center', width: "10%",
  39. render : function(rowdata, rowindex, value, column){
  40. if(0==value)
  41. return "<font color=red>禁用</font>";
  42. if(1==value)
  43. return "<font color=green>激活</font>";
  44. }
  45. },
  46. { display: '操作', isAllowHide: false, align: 'center', width:"15%",
  47. render: function (rowdata, rowindex, value, column){
  48. return '<div class="padding_top4 padding_left20">'
  49. <@pop_perm url="/org/update.do">
  50. + '<span class="hand" title="修改" onclick="onEdit(' + rowdata.orgId + ')">修改</span>'
  51. </@pop_perm>
  52. <@pop_perm url="/org/deleteData.do">
  53. + '&nbsp;&nbsp;<span class="hand" title="删除" onclick="onDelete('+ rowdata.orgId+')">删除</span>'
  54. </@pop_perm>
  55. <@pop_perm url="/orgDetail/createPage.do">
  56. + '&nbsp;&nbsp;<span class="hand" title="补充详细" onclick="onOrgDetailPage('+ rowdata.orgId+')">补充详细</span>'
  57. </@pop_perm>
  58. + '</div>';
  59. }
  60. }
  61. ],
  62. toolbar:{
  63. items:[
  64. <@pop_perm url="/org/create.do">
  65. {text:'新增',click:addUnit,iconClass:'icon_add'},
  66. </@pop_perm>
  67. <@pop_perm url="/org/deleteData.do">
  68. {line:true},
  69. {text:'批量删除',click:batchDelete, iconClass:'icon_delete'},
  70. </@pop_perm>
  71. {line:true}
  72. ]
  73. },
  74. data:[], sortName: 'roleId',rownumbers:true,dataAction:'local',checkbox:true,usePager: false,
  75. height: '100%', width:"100%",heightDiff:-40,
  76. onChangeSort : function(){
  77. getData(g.options.sortName,g.options.sortOrder,g_pageNo,g_pageSize);
  78. return false;
  79. }
  80. });
  81. }
  82. $(function(){
  83. getData(g_pageNo,g_pageSize,parentId);
  84. //加载左边组织树
  85. initTree();
  86. });
  87. /**初始时通过向后台传递排序id、排序顺序、初始页码、每页条数**/
  88. function getData(pageNo,pageSize,parentId){
  89. jQuery.post("${ctx}/org/listPage.do",
  90. getFormParams(pageNo,pageSize,parentId),
  91. function(result){
  92. gridData = result;
  93. //刷新表格
  94. g.loadData(gridData);
  95. //设置左边内容页
  96. var content ="共有" + gridData["pager.totalRows"] + "条记录";
  97. $("#letfContent").html("");
  98. $("#letfContent").html(content);
  99. //取得分页组件
  100. var pager=$("#pager");
  101. //设置总页页数
  102. pager.attr("total",gridData["pager.totalRows"]);
  103. pager.render();
  104. //绑定翻页事件
  105. pager.bind("pageChange",function(e,index){
  106. g_pageNo = index + 1;
  107. getData(g_pageNo,g_pageSize);
  108. });
  109. //绑定选择每页显示记录数事件
  110. pager.bind("sizeChange",function(e,num){
  111. g_pageSize = num;
  112. getData(g_pageNo,g_pageSize);
  113. });
  114. },"json");
  115. }
  116. //查询
  117. function searchHandler(){
  118. //重新加载数据,设置当前页面为1
  119. getData(1,g_pageSize,parentId);
  120. }
  121. /**获得查询表单的提交查询的值**/
  122. function getFormParams(pageNo,pageSize,parentId){
  123. $("#pageNo").val(pageNo);
  124. $("#pageSize").val(pageSize);
  125. $("#parentId").val(parentId);
  126. return $("#searchForm").formToArray();
  127. }
  128. /**重置于查询表单,然后重新加载表格数据**/
  129. function resetSearch(){
  130. $("#searchForm")[0].reset();
  131. //重新加载数据,设置当前页面为1
  132. getData(1,g_pageSize,parentId);
  133. }
  134. //新增
  135. function addUnit() {
  136. top.Dialog.open({
  137. URL : "${ctx}/org/create.do?parentId="+ $("#parentId").val(),
  138. Title : "新增组织",
  139. Width : 600,
  140. Height : 300
  141. });
  142. }
  143. //编辑
  144. function onEdit(rowId) {
  145. top.Dialog.open({
  146. URL : "${ctx}/org/update.do?orgId="+rowId,
  147. Title : "编辑 组织",
  148. Width : 600,
  149. Height : 300
  150. });
  151. }
  152. //补充组织详细页面
  153. function onOrgDetailPage(rowId){
  154. top.Dialog.open({
  155. URL : "${ctx}/orgDetail/createPage.do?orgId="+rowId,
  156. Title : "补充组织详细",
  157. Width : 800,
  158. Height : 350
  159. });
  160. }
  161. //单条记录删除
  162. function onDelete(rowid){
  163. top.Dialog.confirm("确定要删除该记录吗?",function(){
  164. //删除记录
  165. jQuery.post("${ctx}/org/deleteData.do",
  166. {"ids":rowid},
  167. function(responseText){
  168. if(responseText.status=="y"){
  169. top.Dialog.alert(responseText.info);
  170. resetSearch();
  171. initTree();
  172. }else{
  173. top.Dialog.alert(responseText.info);
  174. }
  175. },
  176. "json");
  177. });
  178. }
  179. //批量删除
  180. function batchDelete() {
  181. var rows = g.getSelectedRows();
  182. var rowsLength = rows.length;
  183. if(rowsLength == 0) {
  184. top.Dialog.alert("请选中要删除的记录!");
  185. return;
  186. }
  187. top.Dialog.confirm("确定要删除吗?",function(){
  188. jQuery.post("${ctx}/org/deleteData.do",
  189. //获取所有选中行
  190. getSelectId(g),
  191. function(responseText){
  192. if(responseText.status=="y"){
  193. top.Dialog.alert(responseText.info);
  194. resetSearch();
  195. initTree();
  196. }else{
  197. top.Dialog.alert(responseText.info);
  198. return false;
  199. }
  200. },
  201. "json");
  202. });
  203. //获取所有选中行获取选中行的id 格式为 ids=1&ids=2
  204. function getSelectId(grid) {
  205. var selectedRows = grid.getSelectedRows();
  206. var selectedRowsLength = selectedRows.length;
  207. var ids = "";
  208. for(var i = 0;i<selectedRowsLength;i++) {
  209. if(ids.length>0){
  210. ids += "," +selectedRows[i].orgId;
  211. }else{
  212. ids += selectedRows[i].orgId;
  213. }
  214. }
  215. return {"ids":ids};
  216. }}
  217. /////////////////////////树的处理/////////////////////////
  218. //定义选中的树节点
  219. var selectTreeNode = null;
  220. //定义树节点初始数据
  221. var nodes =[
  222. { id:"0", parentId:-1, name:"组织结构树", open:true,icon:"${ctx}/qui/libs/icons/home.gif"}
  223. ];
  224. //树属性配置
  225. var selectionSetting = {
  226. view: {
  227. dblClickExpand: true
  228. },
  229. callback: {
  230. onClick: zTreeSelect
  231. }
  232. };
  233. //初始化tree处理
  234. function initTree() {
  235. $.ajax({
  236. type : 'POST',
  237. url : '${ctx}/org/getTreeOrgData.do',
  238. data : null,
  239. success : function(result){
  240. var n ="";
  241. n = nodes.concat(result);
  242. $.fn.zTree.init($("#tree"), selectionSetting, n);
  243. },
  244. error : function(a){
  245. top.Dialog.alert("访问服务器端出错!");
  246. },
  247. dataType : 'json'
  248. });
  249. }
  250. //点击树节点刷选对应的表格数据
  251. function zTreeSelect(event,treeId,treeNode) {
  252. selectTreeNode = treeNode;
  253. $("#searchForm")[0].reset();
  254. //重新加载数据,设置当前页面为1
  255. getData(1,g_pageSize,treeNode.id);
  256. }
  257. //处理高度自适应,每次浏览器尺寸变化时触发
  258. function customHeightSet(){
  259. $(".cusBoxContent").height($("#scrollContent").height()+25)
  260. }
  261. /////////////////////////////////////////////////////////
  262. </script>
  263. </head>
  264. <body>
  265. <table width="100%" >
  266. <tr>
  267. <!--左侧区域start-->
  268. <td class="ver01" >
  269. <div class="box2" overflow="true" showStatus="false" panelTitle="组织结构树">
  270. <div class="cusBoxContent" style="width:350px;">
  271. <ul id="tree" class="ztree"></ul>
  272. </div>
  273. </div>
  274. </td>
  275. <!--左侧区域end-->
  276. <!--右侧区域start-->
  277. <td width="100%" class="ver01" >
  278. <div class="box2" panelTitle="查询组织">
  279. <form action="" id="searchForm" method="post">
  280. <input type="hidden" id="pageNo" name="pageNo" value="1"/>
  281. <input type="hidden" id="pageSize" name="pageSize" value="10"/>
  282. <input type="hidden" id="parentId" name="parentId" value="0"/>
  283. <table>
  284. <tr>
  285. <td>组织名称:</td>
  286. <td>
  287. <input type="text" id="Q_orgName_S_LK" name="Q_orgName_S_LK" />
  288. </td>
  289. <td><button type="button" onclick="searchHandler()"><span class="icon_find">查询</span></button></td>
  290. <td><button type="button" onclick="resetSearch()"><span class="icon_reload">重置</span></button></td>
  291. </tr>
  292. </table>
  293. </form>
  294. </div>
  295. <div id="scrollContent">
  296. <div class="padding_right5">
  297. <div id="maingrid"></div>
  298. </div>
  299. </div>
  300. <!-- 分页组件 -->
  301. <div style="height:35px;">
  302. <div id="letfContent" class="float_left padding5"></div>
  303. <div class="float_right padding5">
  304. <div id="pager" total="0" class="pageArrow" showSelect="true" inputPosition="right"></div>
  305. </div>
  306. <div class="clear"></div>
  307. </div>
  308. </td>
  309. <!--右侧区域end-->
  310. </tr>
  311. </table>
  312. </body>
  313. </html>