[easyui] easyui datagrid 可编辑表格

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/cStyle.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></script>

<title>数据修复</title>
</head>
<body>

   <div  class="easyui-layout" fit="true">
        
        
        <div data-options="region:'center',title:'数据修复'" style="margin-left: 20px;">
             
              
            <form id="companyForm" action='' style="margin-left:230px;" method="post" class="easyui-form">

                <table>
                    <tr>
                        <td>企业名称:</td>
                        <td><input id="companyName" name="qymc" class="easyui-validatebox"></td>
                         <td>组织机构代码:</td>
                        <td>
                         <input id="zzjgdm" name="zzjgdm"  class="easyui-validatebox"/>
                        </td>
                
                        <td>工商注册号:</td>
                        <td>
                        <input id="registerNo" name="gszch"
                            class="easyui-validatebox"> 
                        </td>
                            <td>
                        <a class="easyui-linkbutton" onclick="query();">查询</a>
                        <a class="easyui-linkbutton" onclick="resetQuery();">重置</a>
                        </td>
                    </tr>
                </table>
            </form>
              
            <div id="companyCredit" >
            
             </div>
             
             
            <div id="cc" style="margin:0 auto;display:none;" >
              
               <div id="win">
              
             <div  class="easyui-layout" fit="true" >   
    <div data-options="region:'west',title:'信息列表',split:true" style="width:150px;">
          
          <div id="aa" class="easyui-accordion" >   
    <div title="企业基本信息"  style="overflow:auto;padding:10px;">  
      <h4> <a href="#"  onclick="showTabs('基本信息','${pageContext.request.contextPath}/credit/query/jbxx.action');"> 基本信息 </a></h4>
      
    </div>   
    <div title="奖惩信息"  style="padding:10px;">   
          <h4> <a href="#" onclick="showTabs('失信信息 ','${pageContext.request.contextPath}/credit/query/shixxx.action');"> 失信信息 </a></h4>
    </div>   
   
   
</div>  
        
        </div>
          
        <div data-options="region:'center',title:'信息详情'" >
        <!-- tabs选项卡  -->
          <div id="tb" class="easyui-tabs"  >
         </div>
         </div>   
    </div>   
 
     </div> 
     
     </div> 
     
        </div>
    </div>
  
  <script type="text/javascript">

  $(function(){
         var companyName=$("#companyName").val();
         var registerNo=$("#registerNo").val();
         var zzjgdm = $("#zzjgdm").val();
         var editRow = undefined;
         
         $("#companyCredit").datagrid({
             url:'${pageContext.request.contextPath}/credit/company/listQyxx.action',
            queryParams:{qyqc:companyName,gszch:registerNo,zzjgdm:zzjgdm},             
             pagination:true,
             pageSize:10,
             singleSelect: false,
                checkOnSelect: false,
                multiple:true,
                sortName:"shelrq",
                sortOrder:'desc',
             pageList:[10,20,30,50],
             fitColumns:true,
             nowrap:true,
            
             rownumbers:true,
             columns:[
                      [
                       {field:'qiymc',title:'企业名称',width:100,align:'center',editor:{type:'text',options:{required:true}},formatter:function(value,row,index){
                           return "<a href='#' style='text-decoration:none' onclick='showDetail(\""+row.qyid+"\",\""+row.gongszhuch+"\",\""+row.qiymc+"\");'>"+row.qiymc+"</a>";
                           }},
                       {field:'qiyzs',title:'所属地址',width:100,editor:{type:'text',options:{required:true}},align:'center'},
                       {field:'gongszhuch',title:'工商注册号', editor:{type:'text',options:{required:true}},width:100,align:'center'},
                       {field:'zuzjigdm',title:'组织机构代码',editor:{type:'text',options:{required:true}},width:100,align:'center'},
                       {field:'shelrq',title:'注册时间',order:"desc",sortable:true,width:100,align:'center',
                            formatter:function(value,row,index){
                            if (!value)
                                return "";
                           var date = new Date(value);
                           var year = date.getFullYear();
                           var month = date.getMonth()+1;
                           var day = date.getDate();
                           return year+"-"+month+'-'+day;
                       }}
                       
                       ]
                      ],
                 onClickRow:function(rowIndex,rowData){
                if (editRow != undefined) {
                    $("#companyCredit").datagrid('endEdit', editRow);
                }
               },
               onAfterEdit: function (rowIndex, rowData, changes) {
                   editRow = undefined;
               },
               onDblClickRow:function (rowIndex, rowData) {
                   if (editRow != undefined) {
                       $("#companyCredit").datagrid('endEdit', editRow);
                   }else{
                       $("#companyCredit").datagrid('beginEdit', rowIndex);
                       editRow = rowIndex;
                   }
               }
        });

      });

  function query(){
      var companyName=$("#companyName").val();
         var registerNo=$("#registerNo").val();
         var zzjgdm = $("#zzjgdm").val();

         var params = $("#companyCredit").datagrid("options").queryParams;

         params.qyqc=companyName;
         params.zzjgdm=zzjgdm;
         params.gszch=registerNo;

         $("#companyCredit").datagrid("options").queryParams=params;

          $("#companyCredit").datagrid("reload");

      }

  //重置
     function resetQuery(){
         $("#companyForm").form("reset");
         $("#companyCredit").datagrid("reload",{});
     }

     var tabId;
     var gszhuch ;
     var qymc;
     //详情页 
    function showDetail(id,gszch,qiymc){

        tabId = id;
        gszhuch = gszch;
        qymc=qiymc;
        
        
         $("#cc").show();
         $('#win').window({ 
             title:'企业信息',
               fit:true,  
                modal:true,
                closed:true,
                closable:true,
                draggable:true,
                minimizable:false,
                maximizable:true
            });  
         $("#win").window("open");
    
         
     }
  //打开选项卡
     function showTabs(text,url){
         //var text = $("#a"+id).text();
    
         if($("#tb").tabs('exists',text)){
                $('#tb').tabs('select', text);
            }
         else {
             //打开之前关闭所有已经打开的tabs 
             var tabs = $("#tb").tabs("tabs");
             var length = tabs.length;
             for(var i = 0; i < length; i++) {
                 var _tab = tabs[0];
                 var title = _tab.panel('options').tab.text();
                     //var title = onetab.panel('options').title;
                 $("#tb").tabs("close", title);
             }   
             
             $("#tb").tabs("add",{
                 title:text,
                 content:'<iframe name="indextab" scrolling="auto" frameborder="0" style="width:100%;height:400px;"></iframe>',
                 closable:true,  
                 fit:true

                 });
            
             window.open(url+"?id="+tabId+"&qiymc="+qymc+"&gszch="+gszhuch,"indextab");  
             }
         }
  
  </script>

</body>
</html>

 

posted @ 2015-03-21 19:32  snow__wolf  阅读(379)  评论(0)    收藏  举报