Sxlist.aspx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sxlist.aspx.cs" Inherits="wxsystem_Sxlist" %>
  2. <%@ Register Src="Systemtop.ascx" TagName="Systemtop" TagPrefix="uc2" %>
  3. <%@ Register Src="Systemleft.ascx" TagName="Systemleft" TagPrefix="uc3" %>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="utf-8" />
  8. <title>事项列表</title>
  9. <meta name="keywords" content="事项列表" />
  10. <meta name="description" content="事项列表" />
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  12. <!-- basic styles -->
  13. <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  14. <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  15. <!--[if IE 7]>
  16. <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
  17. <![endif]-->
  18. <!-- page specific plugin styles -->
  19. <link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.full.min.css" />
  20. <link rel="stylesheet" href="assets/css/datepicker.css" />
  21. <link rel="stylesheet" href="assets/css/ui.jqgrid.css" />
  22. <!-- fonts -->
  23. <!-- ace styles -->
  24. <link rel="stylesheet" href="assets/css/ace.min.css" />
  25. <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
  26. <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
  27. <!--[if lte IE 8]>
  28. <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
  29. <![endif]-->
  30. <!-- inline styles related to this page -->
  31. <!-- ace settings handler -->
  32. <script src="assets/js/ace-extra.min.js"></script>
  33. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  34. <!--[if lt IE 9]>
  35. <script src="assets/js/html5shiv.js"></script>
  36. <script src="assets/js/respond.min.js"></script>
  37. <![endif]-->
  38. </head>
  39. <body>
  40. <uc2:Systemtop ID="Systemtop1" runat="server" />
  41. <div class="main-container" id="main-container">
  42. <script type="text/javascript">
  43. try { ace.settings.check('main-container', 'fixed') } catch (e) { }
  44. </script>
  45. <div class="main-container-inner">
  46. <a class="menu-toggler" id="menu-toggler" href="#">
  47. <span class="menu-text"></span>
  48. </a>
  49. <div class="sidebar" id="sidebar">
  50. <script type="text/javascript">
  51. try { ace.settings.check('sidebar', 'fixed') } catch (e) { }
  52. </script>
  53. <div class="sidebar-shortcuts" id="sidebar-shortcuts">
  54. <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
  55. <button class="btn btn-success">
  56. <i class="icon-signal"></i>
  57. </button>
  58. <button class="btn btn-info">
  59. <i class="icon-pencil"></i>
  60. </button>
  61. <button class="btn btn-warning">
  62. <i class="icon-group"></i>
  63. </button>
  64. <button class="btn btn-danger">
  65. <i class="icon-cogs"></i>
  66. </button>
  67. </div>
  68. <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
  69. <span class="btn btn-success"></span>
  70. <span class="btn btn-info"></span>
  71. <span class="btn btn-warning"></span>
  72. <span class="btn btn-danger"></span>
  73. </div>
  74. </div>
  75. <uc3:Systemleft ID="Systemleft1" runat="server" />
  76. <div class="sidebar-collapse" id="sidebar-collapse">
  77. <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
  78. </div>
  79. <script type="text/javascript">
  80. try { ace.settings.check('sidebar', 'collapsed') } catch (e) { }
  81. </script>
  82. </div>
  83. <div class="main-content">
  84. <div class="breadcrumbs" id="breadcrumbs">
  85. <script type="text/javascript">
  86. try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }
  87. </script>
  88. <ul class="breadcrumb">
  89. <li>
  90. <i class="icon-home home-icon"></i>
  91. <a href="default.aspx">首页</a>
  92. </li>
  93. <li>
  94. <a href="Wjlist.aspx">部门列表</a>
  95. </li>
  96. <li class="active">事项列表</li>
  97. </ul><!-- .breadcrumb -->
  98. <!-- #nav-search -->
  99. </div>
  100. <div class="page-content">
  101. <div class="page-header">
  102. <h1>
  103. <%=bmname %>
  104. <small>
  105. <i class="icon-double-angle-right"></i>
  106. 事项列表
  107. </small>
  108. </h1>
  109. </div><!-- /.page-header -->
  110. <div class="row">
  111. <div class="col-xs-12">
  112. <!-- PAGE CONTENT BEGINS -->
  113. <div class="alert alert-info">
  114. <i class="icon-hand-right"></i>
  115. 点击事项名称或者查看评价中可查看具体评价内容
  116. <button class="close" data-dismiss="alert">
  117. <i class="icon-remove"></i>
  118. </button>
  119. </div>
  120. <table id="grid-table"></table>
  121. <div id="grid-pager"></div>
  122. <script type="text/javascript">
  123. var $path_base = "/"; //this will be used in gritter alerts containing images
  124. </script>
  125. <!-- PAGE CONTENT ENDS -->
  126. </div><!-- /.col -->
  127. </div><!-- /.row -->
  128. </div><!-- /.page-content -->
  129. </div><!-- /.main-content -->
  130. </div><!-- /.main-container-inner -->
  131. <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
  132. <i class="icon-double-angle-up icon-only bigger-110"></i>
  133. </a>
  134. </div><!-- /.main-container -->
  135. <!-- basic scripts -->
  136. <!--[if !IE]> -->
  137. <script src="assets/js/jquery.min.js"></script>
  138. <!-- <![endif]-->
  139. <!--[if IE]>
  140. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  141. <![endif]-->
  142. <!--[if !IE]> -->
  143. <script type="text/javascript">
  144. window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
  145. </script>
  146. <!-- <![endif]-->
  147. <!--[if IE]>
  148. <script type="text/javascript">
  149. window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
  150. </script>
  151. <![endif]-->
  152. <script type="text/javascript">
  153. if ("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
  154. </script>
  155. <script src="assets/js/bootstrap.min.js"></script>
  156. <script src="assets/js/typeahead-bs2.min.js"></script>
  157. <!-- page specific plugin scripts -->
  158. <script src="assets/js/date-time/bootstrap-datepicker.min.js"></script>
  159. <script src="assets/js/jqGrid/jquery.jqGrid.min.js"></script>
  160. <script src="assets/js/jqGrid/i18n/grid.locale-en.js"></script>
  161. <!-- ace scripts -->
  162. <script src="assets/js/ace-elements.min.js"></script>
  163. <script src="assets/js/ace.min.js"></script>
  164. <!-- inline scripts related to this page -->
  165. <script type="text/javascript">
  166. var grid_data = <%=grid_data %>;
  167. jQuery(function($) {
  168. var grid_selector = "#grid-table";
  169. var pager_selector = "#grid-pager";
  170. jQuery(grid_selector).jqGrid({
  171. //direction: "rtl",
  172. data: grid_data,
  173. datatype: "local",
  174. height: 320,
  175. colNames:['序号','事项名称','实施机关', '评价人数','操作'],
  176. colModel:[
  177. // {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
  178. // formatter:'actions',
  179. // formatoptions:{
  180. // keys:true,
  181. // delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
  182. // //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
  183. // }
  184. // },
  185. {name:'numid',index:'numid', width:50, sorttype:"int", editable: false},
  186. {name:'QL_NAME',index:'QL_NAME', width:200,editable: false,editoptions:{size:"20",maxlength:"30"}},
  187. {name:'QL_DEP',index:'QL_DEP', width:150,editable: false,editoptions:{size:"20",maxlength:"30"}},
  188. {name:'QL_pjnum',index:'QL_pjnum', width:50, editable: false,editoptions: {size:"20",maxlength:"30"}},
  189. {name:'QL_look',index:'QL_look', width:50, editable: false,editoptions: {size:"20",maxlength:"30"}},
  190. ],
  191. viewrecords : true,
  192. rowNum:10,
  193. rowList:[10,20,30],
  194. pager : pager_selector,
  195. altRows: true,
  196. //toppager: true,
  197. multiselect: true,
  198. //multikey: "ctrlKey",
  199. multiboxonly: true,
  200. loadComplete : function() {
  201. var table = this;
  202. setTimeout(function(){
  203. styleCheckbox(table);
  204. updateActionIcons(table);
  205. updatePagerIcons(table);
  206. enableTooltips(table);
  207. }, 0);
  208. },
  209. editurl: $path_base+"/dummy.html",//nothing is saved
  210. caption: "事项列表",
  211. autowidth: true
  212. });
  213. //enable search/filter toolbar
  214. //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
  215. //switch element when editing inline
  216. function aceSwitch( cellvalue, options, cell ) {
  217. setTimeout(function(){
  218. $(cell) .find('input[type=checkbox]')
  219. .wrap('<label class="inline" />')
  220. .addClass('ace ace-switch ace-switch-5')
  221. .after('<span class="lbl"></span>');
  222. }, 0);
  223. }
  224. //enable datepicker
  225. function pickDate( cellvalue, options, cell ) {
  226. setTimeout(function(){
  227. $(cell) .find('input[type=text]')
  228. .datepicker({format:'yyyy-mm-dd' , autoclose:true});
  229. }, 0);
  230. }
  231. //navButtons
  232. jQuery(grid_selector).jqGrid('navGrid',pager_selector,
  233. { //navbar options
  234. edit: false,
  235. editicon : 'icon-pencil blue',
  236. add: false,
  237. addicon : 'icon-plus-sign purple',
  238. del: false,
  239. delicon : 'icon-trash red',
  240. search: false,
  241. searchicon : 'icon-search orange',
  242. refresh: false,
  243. refreshicon : 'icon-refresh green',
  244. view: false,
  245. viewicon : 'icon-zoom-in grey',
  246. },
  247. {
  248. //edit record form
  249. //closeAfterEdit: true,
  250. recreateForm: true,
  251. beforeShowForm : function(e) {
  252. var form = $(e[0]);
  253. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  254. style_edit_form(form);
  255. }
  256. },
  257. {
  258. //new record form
  259. closeAfterAdd: true,
  260. recreateForm: true,
  261. viewPagerButtons: false,
  262. beforeShowForm : function(e) {
  263. var form = $(e[0]);
  264. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  265. style_edit_form(form);
  266. }
  267. },
  268. {
  269. //delete record form
  270. // recreateForm: true,
  271. // beforeShowForm : function(e) {
  272. // var form = $(e[0]);
  273. // if(form.data('styled')) return false;
  274. //
  275. // form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  276. // style_delete_form(form);
  277. //
  278. // form.data('styled', true);
  279. // },
  280. // onClick : function(e) {
  281. // alert(1);
  282. // }
  283. },
  284. {
  285. //search form
  286. recreateForm: true,
  287. afterShowSearch: function(e){
  288. var form = $(e[0]);
  289. form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
  290. style_search_form(form);
  291. },
  292. afterRedraw: function(){
  293. style_search_filters($(this));
  294. }
  295. ,
  296. multipleSearch: true,
  297. /**
  298. multipleGroup:true,
  299. showQuery: true
  300. */
  301. },
  302. {
  303. //view record form
  304. recreateForm: true,
  305. beforeShowForm: function(e){
  306. var form = $(e[0]);
  307. form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
  308. }
  309. }
  310. )
  311. function style_edit_form(form) {
  312. //enable datepicker on "sdate" field and switches for "stock" field
  313. form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
  314. .end().find('input[name=stock]')
  315. .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
  316. //update buttons classes
  317. var buttons = form.next().find('.EditButton .fm-button');
  318. buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
  319. buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
  320. buttons.eq(1).prepend('<i class="icon-remove"></i>')
  321. buttons = form.next().find('.navButton a');
  322. buttons.find('.ui-icon').remove();
  323. buttons.eq(0).append('<i class="icon-chevron-left"></i>');
  324. buttons.eq(1).append('<i class="icon-chevron-right"></i>');
  325. }
  326. function style_delete_form(form) {
  327. var buttons = form.next().find('.EditButton .fm-button');
  328. buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
  329. buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
  330. buttons.eq(1).prepend('<i class="icon-remove"></i>')
  331. }
  332. function style_search_filters(form) {
  333. form.find('.delete-rule').val('X');
  334. form.find('.add-rule').addClass('btn btn-xs btn-primary');
  335. form.find('.add-group').addClass('btn btn-xs btn-success');
  336. form.find('.delete-group').addClass('btn btn-xs btn-danger');
  337. }
  338. function style_search_form(form) {
  339. var dialog = form.closest('.ui-jqdialog');
  340. var buttons = dialog.find('.EditTable')
  341. buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
  342. buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
  343. buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
  344. }
  345. function beforeDeleteCallback(e) {
  346. var form = $(e[0]);
  347. if(form.data('styled')) return false;
  348. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  349. style_delete_form(form);
  350. form.data('styled', true);
  351. }
  352. function beforeEditCallback(e) {
  353. var form = $(e[0]);
  354. form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
  355. style_edit_form(form);
  356. }
  357. //it causes some flicker when reloading or navigating grid
  358. //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
  359. //or go back to default browser checkbox styles for the grid
  360. function styleCheckbox(table) {
  361. /**
  362. $(table).find('input:checkbox').addClass('ace')
  363. .wrap('<label />')
  364. .after('<span class="lbl align-top" />')
  365. $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
  366. .find('input.cbox[type=checkbox]').addClass('ace')
  367. .wrap('<label />').after('<span class="lbl align-top" />');
  368. */
  369. }
  370. //unlike navButtons icons, action icons in rows seem to be hard-coded
  371. //you can change them like this in here if you want
  372. function updateActionIcons(table) {
  373. /**
  374. var replacement =
  375. {
  376. 'ui-icon-pencil' : 'icon-pencil blue',
  377. 'ui-icon-trash' : 'icon-trash red',
  378. 'ui-icon-disk' : 'icon-ok green',
  379. 'ui-icon-cancel' : 'icon-remove red'
  380. };
  381. $(table).find('.ui-pg-div span.ui-icon').each(function(){
  382. var icon = $(this);
  383. var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
  384. if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
  385. })
  386. */
  387. }
  388. //replace icons with FontAwesome icons like above
  389. function updatePagerIcons(table) {
  390. var replacement =
  391. {
  392. 'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
  393. 'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
  394. 'ui-icon-seek-next' : 'icon-angle-right bigger-140',
  395. 'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
  396. };
  397. $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
  398. var icon = $(this);
  399. var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
  400. if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
  401. })
  402. }
  403. function enableTooltips(table) {
  404. $('.navtable .ui-pg-button').tooltip({container:'body'});
  405. $(table).find('.ui-pg-div').tooltip({container:'body'});
  406. }
  407. //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
  408. });
  409. </script>
  410. </body>
  411. </html>