用easyui一个页面展示多个datagrid

最新推荐文章于 2022-07-11 18:15:28 发布
置顶 最新推荐文章于 2022-07-11 18:15:28 发布
阅读量2.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lbb0729/article/details/96964570
版权

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/commons/common_js.jsp" %>
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>****</title>
    <script type="text/javascript">
        var dataGrid;

        $(function () {
            getDisassemblyDate();
            getDate();
        });
        function scanInvData(){
            var code = event.keyCode;
             if(code == 13){
                 var inv = $("#Inv").val();
                 getInvDate(inv);
            }
        }
        
        function getDisassemblyDate(){
            dataGrid = $('#dataGrid').datagrid({
                url: '${path}/*',
                fit: true,
                striped: true,
                rownumbers: false,
                idFeild: 'id',
                pagination: true,
                singleSelect: true,
                sortOrder: 'ASC',
                pageSize: 10,
                pageList: [10, 20, 50, 100, 200, 300],
                columns:
                        [[
                            { field:'ck',checkbox:true },
                                    {
                                        field: 'materialId',
                                        title: '物料INV',
                                        width: 100,
                                        sortable: true
                                    },
                                    {
                                        field: 'afterQty',
                                        title: '数量',
                                        width: 100,
                                        sortable: true
                                    }
                        ]],
                        toolbar: '#toolbar'
            });
            
        }
        
        
        function getDate(){
            dataGrid = $('#dataGrid2').datagrid({
                url: '${path}/*',
                fit: true,
                striped: true,
                rownumbers: true,
                idFeild: 'id',
                pagination: true,
                singleSelect: true,
                sortOrder: 'ASC',
                pageSize: 10,
                pageList: [10, 20, 50, 100, 200, 300],
                columns:
                        [[
                            { field:'ck',checkbox:true },
                                    {
                                        field: 'inv',
                                        title: '原始物料Id',
                                        width: 100,
                                        sortable: true
                                    },
                                    {
                                        field: 'qty',
                                        title: '原始数量',
                                        width: 100,
                                        sortable: true
                                    },
                                    {
                                        field: 'afterInv',
                                        title: '拆分后Id',
                                        width: 100,
                                        sortable: true
                                    },
                                    {
                                        field: 'afterQty',
                                        title: '数量',
                                        width: 100,
                                        sortable: true
                                    },
                                    {
                                        field: 'addUser',
                                        title: '操作员',
                                        width: 100,
                                        sortable: true
                                    },
                                    {
                                        field: 'addTime',
                                        title: '操作时间',
                                        width: 100,
                                        sortable: true
                                    },
                        ]],toolbar:'#toolbar2'
                       
            });
            
        }
        function addFun() {
            parent.$.modalDialog({
                id: 'addDialog',
                title: '添加materialDisassembly',
                width: 800,
                height: 500,
                href: '${path}/*',
                buttons: [{
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function () {
                        parent.$.modalDialog.openner_dataGrid = dataGrid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
                        var f = parent.$.modalDialog.handler.find('#materialDisassemblyInsertBtn');
                        f.click();
                    }
                }, {
                    text: '关闭',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        parent.$('#addDialog').dialog('close');
                    }
                }]
            });
        }
        function getInvDate(inv){
            $.ajax({
                type:'get',
                url:'${path}/*',
                cache:false ,
                dataType:'json',
                data:{inv:inv},
                success:function(result){
                    
                    if (result.obj){
                    }else{
                        parent.$.messager.alert("操作提示",result.msg,"warning");
                    }
                },
                error: function () {
                    alert("查询错误");
                }
            });
        }
            
        function searchFun() {
            var keywords = $('#keywords').val();
            dataGrid.datagrid('load', {keywords: keywords});
        }

        function cleanFun() {
            $('#keywords').val('');
            dataGrid.datagrid('load', {});
        }
    </script>
</head>
<body class="easyui-layout" data-options="fit:true,border:false">

<div style="height: 60%;width: 100%;">
    <table id="dataGrid" data-options="fit:true,border:false"></table>
</div>
<div id="tt" class="easyui-tabs" style="width:100%;height:90%;"fit="true" border="true">   
    <div title="物料拆分查询页面：" >
        <div style="height: 35%;overflow:auto;">
            <table id="dataGrid2" data-options="fit:true,border:false"></table>
        </div>
    </div>   
</div>
<div id="toolbar" style="display: none;">
    <br>
    <hr>
    <span  style="margin-left:20px;">物料INV:</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <input class="easyui-textbox" name="inv" id="inv" type="text" class="easyui-validatebox"
           style="width: 150px;height: 25px;" οnkeydοwn="scanInvData()">&nbsp;&nbsp;&nbsp;&nbsp;
    <span  style="width:300px;height: 25px;" name="materialInfomation" id="materialInfomation" >物料信息显示区，ID，物料编号，物料名称，状态，数量</span>
    <br>
    <br>
     <span  style="margin-left:20px;">拆分的个数:</span>
    <input class="easyui-textbox" name="disassemblyNumber" id="disassemblyNumber" type="text" class="easyui-validatebox"
           style="width: 150px;height: 25px;">&nbsp;&nbsp;&nbsp;&nbsp;
    <span >拆分的数量</span>
    <input class="easyui-textbox" name="AfterQty" id="AfterQty" type="text" class="easyui-validatebox"
           style="width: 150px;height: 25px;">&nbsp;&nbsp;&nbsp;&nbsp;
     <a id="printBtn" href="javascript:void(0)" οnclick="searchFun()" class="easyui-linkbutton"
       iconCls="icon-print">拆分并打印条码</a>
    <br>
    <br>
    <span  style="margin-left:20px;width:300px;height: 25px;" >数据设置错误，拆分不成功，请重新设置拆分数量/拆分成功，结果如下</span>
    <hr>
</div>
<div id="toolbar2" style="display: none;">
    <span style="margin-left:20px;">起始时间:</span>&nbsp;&nbsp;&nbsp;&nbsp;
   <input id="addTime" name="addTime" style="width:180px;height:25px;" type="text" class="easyui-datetimebox" data-options="editable:false,required:true" /> &nbsp;&nbsp;&nbsp;&nbsp;
    <span>截至时间：</span>
   <input id="endTime" name="endTime" style="width:180px;height:25px;"  type="text" class="easyui-datetimebox" data-options="editable:false,required:true" /> &nbsp;&nbsp;&nbsp;&nbsp;
    <span>物料编号/名称：</span>
   <input class="easyui-textbox" name="keyword" id="keyword" type="text" class="easyui-validatebox"
           style="width: 150px;height: 25px;">&nbsp;&nbsp;&nbsp;&nbsp;
   <span>物料ID：</span>
   <input class="easyui-textbox" name="inv" id="inv" type="text" class="easyui-validatebox"
           style="width: 150px;height: 25px;">&nbsp;&nbsp;&nbsp;&nbsp;
   <a id="searchBtn" href="javascript:void(0)" οnclick="searchFun()" class="easyui-linkbutton"
            data-options="iconCls:'icon-search'">查询</a>
</div>
</body>
</html>

 

 

思路，定义两个toobar# 如果有需要，定义两个table必须，


datagrid
分别调用渲染即可

 

写在最后，本人只是为自己做记录，如有需要以及不解处请留言，我会及时回复

 

 

 

Lbb0729
关注
EasyUI-Datagrid二维表格：多表头
一支穿云箭
04-24 9032
人力资源管理有个做二维表格的需求，客户的需求是这样的，如图：        由于是从零开始，没有参考，我就想用easyui 做一下。分析需求，其实难点就三个：1、是将上表头的部分单元格合并。2、是在左侧显示标题。3、是页内单元格可以编辑。          对于easyui来说，单元格合并比较简单，写table时的核心的代码就两句：rowspan 和colspan。其中，
easyui的datagrid使用以及分页
嗡汤圆的博客
08-09 7339
easyui对于开发桌面级的WEB应用界面确实十分方便，而且美观。这里着重记录一下datagrid的使用，以及通过前后端配合实现的超简单的数据分页查询方式。
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
09-01
下面小编就为大家带来一篇easyui datagrid 大数据加载效率慢,优化解决方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
同一页面内加载两个easyui的datagrid问题
lchmyhua88的博客
08-18 1287
关于同一页面内加载多个easyui的datagrid问题: 1.多个datagrid在页面加载时就显示出来，这时直接加载两个表格时是没问题的，都显示出来 .多个datagrid在页面加载时就显示各自的table,可以是不一样的table， 代码如下： <div id="tb"> <div class="searchBox" style="margin-left:10px;"> <span>账单月份选择： &lt...
EasyUi 并列显示两个DataGrid
一只不知疲倦的学习猿
07-11 983
EasyUi 并列显示两个DataGrid
Jquery easyui 批量处理datagrid的数据
andyhe008008008的博客
08-27 143
最近用JQuery EasyUI做项目时,需要在客户端批量处理数据,根据官方的Demo,使用json传递数据到后台,后台通过接收到的json数据,反序列化成一系列model对象,然而进行增删查改操作.现整理如下: 1 <html> 2 <head> 3 <meta name="viewport" content="width...
关于同一页面内加载两个easyui的datagrid问题
glgom的博客
10-26 5883
关于同一页面内加载多个easyui的datagrid问题: 1.多个datagrid在页面加载时就显示出来，这时直接加载两个表格时是没问题的，都显示出来 $(function(){ $("#grid_1").datagrid("load",getGrid1()); $("#grid_2").datagrid("load",getGrid2()); }) 2.当页面初始时只显...
Easyui datagrid
改天的博客
08-14 161
前端页面代码： 实现步骤： 1.初始化访问payOrder页面 2.创建三个按钮用来切换三个不同的页面，通过type 判断访问那个页面的路径。点击start 跳到开始充电页面覆盖payOrder页面。 <%-- Created by IntelliJ IDEA. User: lihanlin Date: 2019/4/30 Time: 10:49 --%> <%@...
easyui datagrid 表格 打印
01-11
在IT领域，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时，可能会遇到一些挑战，因为通常默认的浏览器打印功能...
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
10-21
EasyUI的一个重要组件是datagrid，它是一个数据表格控件，可以显示多行多列的数据，并允许对这些数据进行操作和管理。有时候，为了满足特定的业务需求，在EasyUI的datagrid中需要对某些行的checkbox进行禁用处理。...
SSh结合Easyui实现Datagrid的分页显示（多个实例）
01-12
SSh结合Easyui实现Datagrid的分页显示（多个实例）。这篇写SSh结合Easyui实现Datagrid的分页显示，其他的例如添加、修改、删除、批量删除等功能
easyui 可编辑datagrid完整例子，支持filebox
02-17
总的来说，这个例子展示了如何利用 EasyUI 的 datagrid 和 filebox 扩展来创建一个具有文件上传功能的可编辑数据表，并通过 Java 后端与 MySQL 数据库协同工作。开发人员可以从这个例子中学到如何集成这些组件，实现...
easyUI页面datagrid动态列和form字段动态添加
05-31
easyUI页面datagrid动态列和form字段动态添加；项目开发时用到的，废了不少事，大概总了一下，现在发出来共享给想我一样的要用到的菜鸟们，谢谢
easyui datagrid 多一列
fivestar2009的博客
10-27 1261
一般的时候，easyui的datagrid 会多一列，网上人说是滚动条的事情，因此把它设置为0 $("#bottomZql").datagrid({                   url:'/home/bottomzqj/'+queryDate,                 method:'get',                 scrollbarSize :0,
easyui 表头合并_easyui datagrid 多表头设置
weixin_33019803的博客
12-24 156
最近在做二维报表，要求报表的表头自定义。在网上找了好久二维报表的插件，一直找不到合适的。后来就用easyui 中的datagrid替代了一下。根据实际需求，统计的信息可能不是一个模块中的字段信息，所以需要把模块和模块下的字段都显示出来，这就用到了表格中的合并单元格，但是在datagrid中如何实现呢？ 如下：$('#text').datagrid({border : 2,nowrap : fals...
使用easyui时，每多点击一次多生成一个datagrid窗口的问题
maohuihua的专栏
12-11 1023
easyui下面两种方式都会新生成一个datagrid窗口。 所以要注意不要重复了，也不要跟下面的load和reload混淆了，load和reload只加载不多生成。 id="dg"> $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',wi
一个页面有多个datagrid如何封装复用？
Smile_ping的博客
01-28 1802
一个页面有多个DataGrid如何复用？ 介绍指南 封装DataGrid 使用radio禁用启用 页面其他地方使用vue v-model数据绑定（ 获取单选按钮时，在updated钩子遍历）生命周期执行关系 html代码 项目需求： 1.没有数据，默认.单选框状态选 “无” 并且 禁用DataGrid中（添加、删除）按钮 2.有数据时，单选框状态选中 ” 有” 且 DataGrid
easyUI DataGrid&布局
Neil的专栏
03-26 1791
function initGrid(urlVal) {             $('#tt').datagrid({                 width: document.getElementById('div1').width,                 height: document.getElementById('div1').heigh,
5116-微信小程序电影院订票选座系统设计及实现+ssm（源码+数据库+lun文）.zip
最新发布
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值