easyui datagrid 弹出窗口

最新推荐文章于 2022-04-14 17:23:46 发布
最新推荐文章于 2022-04-14 17:23:46 发布
阅读量6.8k 收藏 1
点赞数
分类专栏： easyui

我的主页面,代码如下：

Javascript代码   收藏代码
  1. //添加数据弹出窗口  
  2. $(function(){             
  3.     addDataWin = $('#addData-window').window({                    
  4.         href:'${basePath}/page/marketPlat2/addData/addData.jsp?workId=${workId}year=${year}&month=${month}   &quarter=${quarter}&businessType=${businessType}&type=${type}',  
  5.     title:'添加数据',  
  6.     left:'100px',  
  7.     top:'70px',  
  8.     closed: true,  
  9.     modal: false,  
  10.     cache: false,  
  11.     minimizable:false,  
  12.     maximizable:false,  
  13.     collapsible:false,  
  14.     shadow: false  
  15.     });  
  16. //添加数据弹出窗口  
  17.     function addData(){  
  18.         addDataWin.window('open');                       
  19.     }  
  20. }  
  21. //这里只插入了一个datagrid的部分代码，就是点击这个按钮，就会新调用addData()方法；  
  22. {  
  23.     id:'add',  
  24.     text:'新增',  
  25.     iconCls:'icon-add',  
  26.     handler:addData  
  27. }  
  28.  //关闭弹出窗口  
  29. function closeWin(myWin) {  
  30.     myWin.window('close');  
  31.                    
  32. };    

 

Html代码   收藏代码
  1. <!-- 弹出窗口：添加数据 -->  
  2. <div id="addData-window" title="添加数据" style="width:510px;height:300px;font-size: 16">  
  3. </div>  


效果图为： 
主页面代码 

第一个弹出窗口代码为：

Html代码   收藏代码
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://"  
  6.             + request.getServerName() + ":" + request.getServerPort()  
  7.             + path + "/";  
  8.     response.setHeader("Cache-Control", "no store");//HTTP 1.1   
  9.     response.setHeader("Pragma", "no store");//HTTP 1.0   
  10.     response.setDateHeader("Expires", 0);//在代理服务器端防止缓冲  
  11.       
  12.       
  13.     request.setAttribute("workId", request.getParameter("workId"));//yearwork表中的  
  14.     request.setAttribute("year", request.getParameter("year"));//年  
  15.     request.setAttribute("month", request.getParameter("month"));//月  
  16.     request.setAttribute("querter", request.getParameter("quarter"));//季  
  17.     request.setAttribute("businessType", request.getParameter("businessType"));//任务类型      （周1 年3 季2 月0）  
  18.     request.setAttribute("type", request.getParameter("type"));  
  19. %>  
  20.   
  21. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  22. <html>  
  23. <head>  
  24. <base href="<%=basePath%>">  
  25.   
  26. <title>添加数据</title>  
  27.   
  28. <meta http-equiv="pragma" content="no-cache">  
  29. <meta http-equiv="cache-control" content="no-cache">  
  30. <meta http-equiv="expires" content="0">  
  31. <script type="text/javascript">  
  32.     $(function(){  
  33.         $('#btn-save,#btn-close-save,#serchCustomList,#seachProductList').linkbutton();  
  34.         customobjWin=$('#customobj-window').window({  
  35.             href:'${basePath}/page/marketPlat2/addData/seachCustomobj_list.jsp?',  
  36.             title:'选择客户单位',           
  37.             closed: true,  
  38.             minimizable:false,  
  39.             maximizable:false,    
  40.             collapsible:false,  
  41.             cache:false,  
  42.             shadow:false  
  43.         });  
  44.         productWin=$('#product-window').window({  
  45.             href:'${basePath}/page/marketPlat2/addData/seachProduct_list.jsp?&type=${type}',  
  46.             title:'选择产品',             
  47.             closed: true,  
  48.             minimizable:false,  
  49.             collapsible:false,  
  50.             maximizable:false,    
  51.             cache:false,  
  52.             shadow:false  
  53.         });  
  54.     });  
  55.     //选择客户单位弹出窗口  
  56.     function seachCustomobj(){  
  57.         customobjWin.window('open');  
  58.            
  59.     }  
  60.     //给客户单位文本框和隐藏域赋值  
  61.     function setCustomobjName(customOBJ){  
  62.         $('#seachCustomobjId').val(customOBJ.customobjId);  
  63.         var s =$('#seachCustomobjId').val();  
  64.         $('#seachCustomobjName').val(customOBJ.customobjName);  
  65.     }  
  66.     //给产品文本框和隐藏域赋值  
  67.     function setProductName(productOBJ){  
  68.         $('#seachProductId').val(productOBJ.productId);  
  69.         $('#seachProductName').val(productOBJ.productName);  
  70.     }  
  71.     //关闭客户单位弹出窗口  
  72.     function closeCustomWin(){  
  73.         customobjWin.window('close');  
  74.        
  75.     }  
  76.     //关闭产品弹出窗口  
  77.     function closeProductWin(){  
  78.         productWin.window('close');  
  79.            
  80.     }  
  81.     //选择产品弹出窗口  
  82.     function seachProduct(){  
  83.         var customobjId = $('#seachCustomobjId').val();  
  84.         if(customobjId==""||customobjId==null){  
  85.             alert("请选择客户单位");  
  86.             return false;  
  87.         }else{  
  88.             productWin.window('open');  
  89.         }  
  90.     }  
  91. </script>  
  92. </head>  
  93.   
  94. <body>  
  95.         <div style="padding: 10px 10px 10px 10px;">  
  96.                 <form method="poxt">  
  97.                     <table >  
  98.                         <tr>  
  99.                             <td width="30%">请选择客户单位：</td>  
  100.                             <td width="50%">  
  101.                                 <input type="hidden" id="seachCustomobjId" name="seachCustomobjId" />  
  102.                                 <input type="text" name="seachCustomobjName" id="seachCustomobjName" readonly="readonly"  class="easyui-validatebox"  required="true" missingMessage="请选择客户单位名称" style="width:200px"></input>  
  103.                             <td>  
  104.                             <td width="20%"><a href="javascript:void(0)" onclick="seachCustomobj()"  id="serchCustomList" icon="icon-search">选择</a></td>  
  105.                         </tr>  
  106.                         <tr><td colspan="3">&nbsp;</td></tr>  
  107.                         <tr>  
  108.                             <td>请选择产品：</td>  
  109.                             <td>  
  110.                                 <input type="hidden" id="seachProductId" name="seachProductId" />  
  111.                                 <input type="text" name="seachProductName" id="seachProductName" readonly="readonly"  class="easyui-validatebox"  required="true" missingMessage="请选择产品名称" style="width:200px"></input>  
  112.                             <td>  
  113.                             <td ><a href="javascript:void(0)" onclick="seachProduct()" id="seachProductList" icon="icon-search">选择</a></td>  
  114.                         </tr>  
  115.                     </table>  
  116.                 </form>  
  117.             </div>  
  118.             <div style="text-align: center; padding: 5px;">  
  119.                 <a href="javascript:void(0)" onclick="saveAddData()" id="btn-save" icon="icon-save">保存</a>&nbsp;&nbsp;&nbsp;&nbsp;  
  120.                 <a href="javascript:void(0)" onclick="closeWin(addDataWin)" id="btn-close-save" icon="icon-cancel">取消</a>  
  121.             </div>  
  122.     </table>  
  123.     <!-- 2期新增数据功能之选择客户单位弹出窗口 -->  
  124.         <div id="customobj-window" class="earyui-window" title="选择客户单位" style="width: 550px; height: 350px; padding: 0px; background:#fafafa; ">  
  125.     <!-- 2期新增数据功能之选择产口弹出窗口 -->  
  126.         <div id="product-window" class="earyui-window" title="选择产品" style="width: 550px; height: 300px; padding: 0px; background:#fafafa; ">  
  127.         </div>  
  128. </body>  
  129. </html>  

 

效果图如下：

第一个弹出窗口

第二个弹出窗口代码为：

Html代码   收藏代码
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. response.setHeader("Cache-Control", "no store");//HTTP 1.1   
  6. response.setHeader("Pragma", "no store");//HTTP 1.0   
  7. response.setDateHeader("Expires", 0);//在代理服务器端防止缓冲  
  8. %>  
  9. <html>  
  10.     <head>  
  11.         <base href='${basePath}'>  
  12.         <title>选择客户单位</title>  
  13.         <META HTTP-EQUIV="Pragma" CONTENT="no-cache">  
  14.         <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">  
  15.         <META HTTP-EQUIV="Expires" CONTENT="0">  
  16.         <script type="text/javascript">  
  17.         var customOBJ;  
  18.           
  19.         $(function(){     
  20.                         
  21.             $('#btn-search,#btn-save','#product-search1').linkbutton();  
  22.             $('#customobjList').datagrid({     
  23.                 width:500,   
  24.                 height:200,   
  25.                 pageSize:5,  
  26.                 pageList:[5,15,20,25,30,35,40],  
  27.                 singleSelect:true,  
  28.                 nowrap:false,  
  29.                 url:'${basePath}/marketPlat/addDataServlet?method=seachOwnCustomobj',  
  30.                 onLoadSuccess:function(data){  
  31.                     //alert(data.rows.length);  
  32.                 },  
  33.                 onDblClickRow:function(rowIndex, rowData){  
  34.                     customOBJ=new Object();                   
  35.                     customOBJ.customobjId=rowData.customObjId;  
  36.                     customOBJ.customobjName=rowData.name;  
  37.                     setCustomobjName(customOBJ);  
  38.                     closeCustomWin();  
  39.                 },  
  40.                 columns:[[            
  41.                     {field:'name',title:'客户单位全称',width:180,align:'left',  
  42.                         formatter:function(value,rowData,rowIndex){  
  43.                             //alert(value);  
  44.                             return value;  
  45.                         }  
  46.                     },  
  47.                     {field:'industry',title:'所属行业',width:150,align:'center'},  
  48.                     {field:'regionType',title:'客户类别',width:150,align:'center'}  
  49.                 ]],  
  50.                 pagination:true  
  51.             });   
  52.               
  53.         }) ;  
  54.         function searchCustomobj(){  
  55.             var customobjName = $('#customobjName').val();    
  56.             var queryParams = $('#customobjList').datagrid('options').queryParams;  
  57.             queryParams.seachCustomobjName=customobjName;  
  58.             $('#customobjList').datagrid('reload');  
  59.         }  
  60.           
  61.     </script>   
  62.     </head>  
  63.     <body>  
  64.         <div>  
  65.             <form id="customForm" method="post">  
  66.             <table height="100%" cellspacing="0" cellpadding="0" width="100%" border="0">  
  67.               
  68.                     <tr>  
  69.                         <td style="background-image: url(images/main_ls.gif)">  
  70.                                 
  71.                         </td>  
  72.                         <td  
  73.                             style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; color: #566984; padding-top: 10px; background-color: white"  
  74.                             valign="top" align="left">  
  75.                             客户单位名称：<input type="text" id="customobjName" width="150px" height="30" value="" />  
  76.                             <a href="javascript:void(0)" onclick="searchCustomobj();" class="easyui-linkbutton"  id="btn-search" icon="icon-search">查询</a>  
  77.                         </td>  
  78.                         <td style="background-image: url(images/main_rs.gif)"></td>  
  79.                     </tr>  
  80.                     <tr>  
  81.                         <td style="background-image: url(images/main_ls.gif)">  
  82.                             &nbsp;  
  83.                         </td>  
  84.                         <td  
  85.                             style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; color: #566984; padding-top: 10px; background-color: white"  
  86.                             valign="top" align="left">  
  87.                             <div>  
  88.                                 <table id="customobjList" border="1"></table>  
  89.                             </div>  
  90.                         </td>  
  91.                         <td style="background-image: url(images/main_rs.gif)"></td>  
  92.                     </tr>  
  93.                   
  94.             </table>  
  95.             </form>  
  96.         </div>  
  97.       
  98.     </body>  
  99. </html>  

 

效果图为：

第二个弹出窗口

正常操作步骤：
1、点击新增按钮时（第一个图片），
2、打开第一个弹出窗口“添加数据弹出窗口”（第二个图片），
3、当我在添加数据弹出窗口中点击“查询”按钮时，弹出第二个弹出窗口，查询出数据显示出来（第三个图片）；
现在问题是：
如果我按上面顺序打开后，没有做任何操作，再关闭2、3步骤的弹出窗口，再重复上面1－3的步骤时，第3步的页面打开没有数据，直接显示空白，如果把主页面刷新一下，又正常了，但是打开第一层、第二层弹出窗口,再关闭，然后再点击新增按钮，再加开第一层弹出窗口，没有任务问题，打开第二层弹出窗口后，又出现空白。

我查看了一下，没有缓存，而且第3步的datagrid方法也在后台debug调用了，打开第二层弹出窗口时，后台的方法也有执行，也有返回json字符串数组，在第3步的页面jsp中我也alert()打印过了，都有数据，就是table显示不出来，请教一下高手这是哪 里出问题了？如何解决？
附问题页面：

问题图

Stevens...
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Jquery EasyUI Datagrid右键菜单实现方法
12-29
最近在学Jquery EasyUI，现在来说一说EasyUI的DataGrid，一般当我们在实现前端界面的时候，经常在DataGrid的上面或者后面加一些按钮，方便用户进行一些添加，删除，编辑等功能 用户在每次使用的时候，都需要去先选中一条或者多条数据，然后在去点按钮进行相关操作，这样其实还是很麻烦的，做项目的过程中，为了用户着想，做了一个右键菜单，用户想要删除或者编辑某一条数据直接在其位置上右键就可以。 下面上HTML 代码 <!--放置
基于easyui 1.3.2+的弹出窗口
06-12
基于easyui的弹出框，为了方便使用稍微封装了下，有新增 修改用的，查看用的，有多步（上一步，下一步 跳过 ）的，自定义按钮等等。分享下 赚点分
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
09-01
下面小编就为大家带来一篇easyui datagrid 大数据加载效率慢,优化解决方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery EasyUI datagrid实现本地分页的方法
01-19
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听，以及JS数组的slice方法来完成。代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title></title> <link href=js/jquery-easyui-1.3.6/themes/default/easyui.css rel=stylesheet/>
easyui datagrid editor回车切换单元格示例，可参考
12-27
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
jQueryEasyUI Messager基本使用(转)
weixin_30735391的博客
08-30 415
一、jQueryEasyUI下载地址 http://www.jeasyui.com/ 二、jQueryEasyUI Messager基本使用 1、$.messager.alert(title, msg, icon, fn) 1>、基本用法 代码： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15...
EasyUI弹出窗口实例
u011927449的博客
07-06 397
效果体验：http://hovertree.com/texiao/jeasyui/1.htm源代码下载：HovertreeJEasyUIHTML文件代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery EasyUI实例基本弹出窗口-hovertree</title> <link rel="stylesheet" typ
easyui 实现弹出窗口（datagrid，form...）的各种方法
qq_40485890的博客
08-14 5285
设置弹窗的大题思路是通过display：或者visibility：两种样式的属性隐藏窗口，在通过按钮或者其他方式触发show方法来显示窗口，hide方法关闭窗口，也可以toggle来控制弹窗， window.onload = function () { $(document).ready(function(){ $("#aa").click(funct...
easyui jquery textbox增加按钮 点击出现窗口window+网格datagrid 选择一行后点击将值填入到textbox
m0_56598099的博客
06-15 616
easyui jquery textbox增加按钮 点击出现窗口window+网格datagrid 选择一行后点击将值填入到textbox1. 文本框textbox2. 窗口window3. 按钮点击事件——生成datagrid4.确认按钮5.存储过程 1. 文本框textbox <input id="productid" type="text" > $('#productid').textbox({ …… 省略了一些属性 buttonIcon:'locateIcon',
EasyUI DataGrid过滤用法实例
02-22
EasyUI DataGrid过滤用法实例
easyui-datagrid如何在编辑行中打开窗口
qq_43170460的博客
04-14 1288
easyui-datagrid如何在编辑行中打开窗口，在窗口中双击行返回数据 效果:点击easyui-datagrid里的图标，打开新窗口。双击新窗口的行把数据返回。 问题1：一开始用的textbox里的onClickButton事件时发现无法获取e值。后改用handler解决。 问题2：因为点击datagrid里的按钮和图标不能选中行，无法确定双击返回的到哪一行。所以在点击图标时将原值改为input。双击返回时查找值为input所对应的行。（不知道有没有更好的方法） 问题3：正在编辑的行如果update
EasyUI里dataGrid，点击后弹出单选框选择数据并赋值到文本框中
qq_45728838的博客
08-12 1417
第一个是userMessageShow.jsp内容展示 <script type="text/javascript"> var grid; $(function() { grid = $('#grid').datagrid({ url : web.contextPath + '/coreUser/messageList.do', striped : true, //设置为 true，则把行条纹化。（即奇偶行使用不同背景色） fitColumns :
Easyui--datagrid 的使用 （弹出框的使用）
热门推荐
Fanbin168的专栏
11-16 1万+
1 Home控制器 using DbService; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Script.Serialization; namespace MvcAppEF.Contr
04.手把手教你 .Net EasyUI DataGrid(弹框式添加数据)
lemoncorporation的博客
05-23 5039
本章博客我将带你实现，在前一篇的基础上，新增实现弹框式添加数据到数据库的功能。（接下来的博客将会推出，修改，删除数据功能） 效果图，4-1： 所谓弹窗式，就像图4-1的那样，弹出一个窗口，用户输入信息然后新增到数据库， 前台HTML如下： #fm{ margin:0; paddin
Jquery easyui 实现datagrid的单元格点击跳出弹出框
Sano_pan的博客
08-21 6059
最开始，页面布局如图，我们需要选中一行后再点击查看详情才可以，若点中两行，则跳出的弹出框。 然后呢，客户为了方便，要求直接在每一行操作后即可查看详情。所以，我就开始了吭哧吭哧改页面之路。 刚开始，我是想做成点击后直接下拉框内有详情的样子，如 这个样子的。可是呢，好像和我们想展示的周报详情有点不太符合，毕竟周报内容比较多，同时为了方便删除，我保留了选择框。 最后决定做成每一行添加按钮，可以直
easyui表格Datagrid弹窗操作
weixin_30885111的博客
12-06 448
后台自己倒腾去 图片预览 Jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt...
easyui带表单的弹窗效果制作
学亮编程手记
01-12 4720
带表单的弹窗效果制作 点击【增加】按钮，弹出带表单的窗口。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>取派标准</title> <!-- 导入jquery核心类库 --> <script type="text/javascript" src="../
easyui datagrid
最新发布
09-09
easyui datagrid是一个基于jQuery和EasyUI框架的网页表格插件，用于展示和编辑数据。它具有丰富的功能和灵活的配置选项，可以实现分页、排序、查询、编辑等操作。通过使用easyui datagrid，可以方便地展示和操作数据表格。 在给出的代码中，使用了easyui datagrid来展示书籍的信息。首先，在HTML中定义了一个隐藏的input元素，用于存储上下文路径。然后，在div元素中定义了搜索框和按钮，用于根据书名进行查询。最后，使用table元素创建了一个datagrid，其中定义了表格的列和其他配置项。 通过以上代码，可以实现一个具有搜索、分页和编辑功能的书籍列表页面。可以根据书名进行搜索，并且可以编辑每一行的数据。具体的实现可以参考给出的代码和EasyUI的文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值