• 可编辑表格


      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  
  • 相关阅读:
    C#接口入门学习
    消息队列接收时报错:对消息队列系统的访问被拒绝
    给某做测试的好友的建议
    在不同的Sql Server 数据库服务器(不同机器)导数据。
    如何让开发人员更好测试?
    存储过程初探
    语音报警.NET开发初探
    vs2010下Siverlight开发环境安装
    C# HttpWebRequest 从google服务器获取google的PageRank PR值
    创建进程API CreateProcess Demo
  • 原文地址:https://www.cnblogs.com/zuoqun/p/7904040.html
Copyright © 2020-2023  润新知