可编辑表格

  1 <%@ page contentType="text/html;charset=UTF-8"%>
  2 <%@ include file="/common/taglibs.jsp"%>
  3 <html lang="zh-cn">
  4 <head>
  5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8 <meta name="renderer" content="webkit">
  9 <title></title>
 10 
 11 <link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
 12 <link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.4.1/themes/icon.css" />
 13 <link rel="stylesheet" href="../resource/css/pintuer.css">
 14 <link rel="stylesheet" href="../resource/css/admin.css">
 15 <link rel="stylesheet" href="../resource/css/style.css">
 16 <link rel="stylesheet" href="../resource/js/kindeditor/themes/default/default.css" />
 17 <script type="text/javascript" src="../resource/js/jquery.js"></script>
 18 <script type="text/javascript" src="../resource/js/pintuer.js"></script>
 19 <script type="text/javascript" src="../resource/js/My97DatePicker/WdatePicker.js"></script>
 20 <script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/jquery.min.js"></script>
 21 <script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
 22 <script type="text/javascript" src="../resource/js/tagsinput/jquery.tagsinput.js"></script>
 23 <script type="text/javascript" src="../resource/js/tagsinput/jquery.tagsinput.min.js"></script>
 24 <script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
 25 <script type="text/javascript" src="../resource/js/utils.js"></script>
 26 <!-- <script type="text/javascript" src="../resource/js/util_tab.js"></script> -->
 27 <script type="text/javascript" src="../resource/js/json2.js"></script>
 28 <script charset="utf-8" src="../resource/js/kindeditor/kindeditor-all-min.js"></script>
 29 <script charset="utf-8" src="../resource/js/kindeditor/lang/zh-CN.js"></script>
 30 </head>
 31  <body>
 32       <div id="left" class="easyui-panel panel-body panel-body-noheader" style="padding: 5px;  298px; height: 648px;" >
 33           <!-- 用来显示加载的书 -->
 34           <strong class="icon-reorder"> 码表类型</strong>
 35           <br />
 36           <ul  id="tt" ></ul>
 37       </div>
 38     <div id="right" class="iframe-admin">
 39         <div class="panel-head clearfix lh30"><strong class="icon-reorder"> 码表管理</strong>
 40         <a class="button border-main icon-plus-square-o small-btn pull-right"  href="javascript:addnewtyperoot()">添加新类型码表信息</a>
 41         </div>
 42         <table id="dg" style="height: 90%"></table>
 43     </div>
 44     <!--列表表头查询  -->
 45     <div id="userQuery" fit="true" style="height:auto;">
 46         <form method="post" id="queryform" name="queryform">
 47             <div class="panel-head clearfix lh30">
 48             <a class="button border-main icon-plus-square-o small-btn pull-right"  href="javascript:goAdd()">添加行</a> 
 49             <a class="button border-main icon-plus-square-o small-btn pull-right"  href="javascript:saveAllData()"> 保存</a> 
 50             <a class="button border-main icon-plus-square-o small-btn pull-right"  href="javascript:reject()"> 撤销</a> 
 51             </div>
 52                 <div class="padding">
 53                       <ul class="search" style="padding-left:10px;">
 54                       <li>码表名：
 55                       <input type="text" id="codename"  name="codename" class="input w120" style="line-height:17px;display:inline-block" />
 56                 </li>
 57                 <li><a href="javascript:doSearch('dg', $('#queryform').serializeJson());" class="button border-main icon-search" style="line-height:29px;">查询</a></li>
 58                 </ul>
 59             </div>
 60         </form>
 61     </div>
 62     
 63     <!--添加新类型页面窗口  -->
 64     <div id="winOpenEdit" class="easyui-window"
 65     data-options="modal:true,closed:true,collapsible:false,minimizable:false,maximizable:false,600,height:500,
 66              onLoadError:function(request){
 67                  $(this).window('close');
 68                  exeError(request);
 69              }">
 70     </div>
 71 <script type="text/javascript">
 72     /*刷新树信息  */
 73     function fushTree(){
 74         $('#tt').tree({
 75             url:'${ctx}/dict/codeType.do',
 76             lines:true,//显示加减号    
 77             animate:true //动画效果
 78         })
 79     }
 80     /*加载树信息  */
 81     $('#tt').tree({
 82         url:'${ctx}/dict/codeType.do',
 83         lines:true,//显示加减号    
 84         animate:true, //动画效果
 85         onSelect:function(node){
 86             $('#dg').datagrid({    
 87                 url:'${ctx}/dict/pagedata.do?codetypeid='+node.id,
 88                 rownumbers:true,
 89                 pageSize:10,
 90                  striped:true,
 91                  pagination:true,
 92                  singleSelect:true,
 93                  idField:'codeid',
 94                  iconCls: 'icon-edit',
 95                  toolbar : '#userQuery',
 96                  onClickCell: onClickCell,
 97                 columns:[[    
 98                     {field:'codeid',title:'编码ID',140,align:'center',hidden:true}, 
 99                     {field:'codetypeid',title:'编码类型ID',140,align:'center',hidden:true}, 
100                     {field:'codevalue',title:'编码类型',140,align:'center'},    
101                     {field:'codename',title:'编码名称',140,align:'center',editor:'text'},    
102                     {field:'upcodeid',title:'上级编码名称',140,align:'center',formatter:function(value,row){
103                         return row.upcodename;
104                     }, editor:{
105                         type:'combobox',
106                         options:{
107                             valueField:'upcodeid',
108                             textField:'upcodename',
109                             url:'${ctx}/dict/codeByTypeId.do?comboxval='+node.attributes.codetypeid,
110                               }
111                        }  
112                     },
113                     {field:'crtoper',title:'创建人',140,align:'center'},    
114                     {field:'crttime',title:'创建时间',140,align:'center'},
115                     {field:'admin',title:'操作',140,align:'center',formatter:operate}
116                 ]]
117             });
118         }
119     }); 
120     
121     //点击某个单元格时触发，index为单元格索引
122     function onClickCell(index, field,value){
123         $('#dg').datagrid('beginEdit', index);
124     }
125     
126     
127     function saveAllData(){
128         //保存前结束本页所有编辑行
129         var index = $("#dg" ).datagrid("getRows" ).length;
130         for(var i=0;i<index;i++){
131             $('#dg').datagrid('endEdit',i);
132         }
133         //DataGrid的更改行不为0
134         if ($("#dg").datagrid('getChanges').length){
135             //获取更新更改的行的集合
136             var updated = $("#dg").datagrid('getChanges', "updated")
137             if(updated==null||updated.length<1){
138                 updated=""
139             }else{
140                 for(var i=0;i<updated.length;i++){
141                     if(updated[i].codename==null||updated[i].codename==""){
142                         $.messager.alert('提示','请输入码表名称！');
143                         return;
144                     }
145                 }
146                 updated=JSON.stringify(updated)
147             }
148             var inserted=$("#dg").datagrid('getChanges', "inserted");
149             if(inserted==null||inserted.length<1){
150                 inserted=""
151             }else{
152                 for(var i=0;i<inserted.length;i++){
153                     if(inserted[i].codename==null||inserted[i].codename==""){
154                         $.messager.alert('提示','请输入码表名称！');
155                         return;
156                     }
157                 }
158                 inserted=JSON.stringify(inserted)
159             }
160             var deleted=$("#dg").datagrid('getChanges', "deleted");
161             if(deleted==null||deleted.length<1){
162                 deleted=""
163             }else{
164                 deleted=JSON.stringify(deleted)
165             }
166             $.post("${ctx}/dict/update.do", 
167                     { "updated":updated,"inserted":inserted,"deleted":deleted },
168                     function (data) {
169                         var result = eval('('+data+')');
170                         if(result.success){
171                          $.messager.show({
172                              title: '提示信息',
173                              msg: result.message,
174                              timeout: 3000
175                          });    
176                       }else{
177                           $.messager.show({
178                              title: '提示信息',
179                              msg: result.message,
180                              timeout: 3000
181                          });    
182                      }
183                     $("#dg").datagrid('reload');
184                     var rows=$("#dg").datagrid('getRows');
185                     if(rows.length<1){
186                         fushTree();
187                     }
188             });
189         }else{
190             $.messager.show({
191                     title: '提示信息',
192                     msg: '没有变更信息',
193                     timeout: 3000
194                 });
195             
196             return 
197         }
198     }
199 
200     //撤销按钮
201     function reject() {
202         $('#dg').datagrid('rejectChanges');
203         editIndex = undefined;
204     }
205     
206     function operate(value,row,index){
207         var result = '<div class="button-group">';
208         result += '<a class="button border-red" href="javascript:goDel('+index+')" >';
209         result += '<span class="icon-trash-o"></span>删除</a>';
210         result+='</div>';
211         return result; 
212     }
213     
214     //添加行操作
215     function goAdd(){
216         var node = $('#tt').tree('getSelected');
217         $('#dg').datagrid('appendRow',{codetypeid:node.attributes.codetypeid,codevalue:node.text});
218         var index=$('#dg').datagrid('getRows').length-1
219         $('#dg').datagrid('beginEdit', index);
220     }
221     
222     //删除行操作
223     function goDel(index){
224         $('#dg').datagrid('deleteRow',index);
225     }
226    
227     //添加新类型码表信息
228     function addnewtyperoot(){
229         var upcodeid=0;
230         var upcodename="根节点";
231         if($("#dg").html()!=null&&$("#dg").html()!=""){
232             var selected=$("#dg").datagrid("getSelected");
233             //有选中的节点作为上级id，没有选择节点默认为根节点        
234             if(selected!=null){
235                 upcodeid=selected.codeid
236                 upcodename=selected.codename
237             }
238         }
239         $("#winOpenEdit").window({title:'添加新类型节点'});
240            $("#winOpenEdit").window({href:'${ctx}/dict/addpage.do?upcodeid='+upcodeid+'&upcodename='+upcodename});
241            $("#winOpenEdit").window("open");
242     }
243 </script>
244 </body>
245 </html>
246