首页 > 其他分享 >将easyui-datagrid组件克隆至另一个 easyui-datagrid组件 表结构(列)及数据完全一样

将easyui-datagrid组件克隆至另一个 easyui-datagrid组件 表结构(列)及数据完全一样

时间:2023-06-14 15:45:57浏览次数:40  
标签:easyui cols datagrid grid 组件 toexcel

将 grid 组件克隆至 grid_toexcel 组件 表结构(列)及数据完全一样

html

<table id='grid'  class='easyui-datagrid' style='width:1250px;min-height:450px'  
            title='列表' iconCls='icon-table' pagination='true' rownumbers='true' fitColumns='true' singleSelect='true' toolbar='#toolbar' >   
        <thead>  
            <tr>  
                <th field='agent_name' width='25'align='center' sortable='true' >坐席工号</th> 
                <th field='user_name' width='25'align='center' sortable='true' >坐席员</th> 
                <th field='start_time' width='40'align='center' sortable='true' >开始时间</th>
                <th field='stop_time' width='40'align='center' sortable='true' >结束时间</th> 
                <th field='time_len' width='20'align='center' sortable='true' >时长</th> 
                <th field='time_len_s' width='20'align='center' sortable='true' >时长(秒)</th> 
                <th field='status' width='20'align='center' sortable='true' >状态</th>  
                <th field='description' width='80'align='center' sortable='true' >描述</th> 
            </tr>  
        </thead>  
    </table>  
    <div id='div_toexcel' class='easyui-panel'><!-- 用于导出  closed='true'-->
        <table id='grid_toexcel' class='easyui-datagrid'> 
        </table>  
    </div>

js

        //var cols = $('#grid').datagrid('getColumnFields'); //仅获取所有列名
        
        //将grid的表结构(列名)赋给grid_toexcel
        var cols=$('#grid').datagrid('options').columns; //获取所有列json对象
        //console.log(cols[0]);
        $('#grid_toexcel').datagrid({columns:[cols[0]]}).datagrid("reload");
        
        //将grid中的数据 赋给grid_toexcel
        $('#grid_toexcel').datagrid('loadData',$('#grid').datagrid('getData')); 

 

标签:easyui,cols,datagrid,grid,组件,toexcel
From: https://www.cnblogs.com/hailexuexi/p/17480426.html

相关文章

  • 2023-06-14 记录一下vue组件如何调用App.vue里面的方法(代码来至chatGpt)
    可以通过在子组件中使用$emit方法来触发App.vue中的方法。具体步骤如下:在App.vue中定义一个方法<script>exportdefault{methods:{appMethod(){console.log('调用了App.vue中的方法')}}}</script>在子组件中使用$emit方法触发该方......
  • web页面中导出Excel (方法二) 前端easyui-datagrid导出Excel 使用 datagrid-export.js
    这个示例使用 前端easyui-datagrid 后端php 前端easyui-datagrid导出Excel使用了datagrid-export.js datagrid-export.js文件可自行搜索下载优点:查询结果显示在datagrid中(不能分页),前端直接下载不用回后端,效率高速度快。缺点:查询结果不能分页,必须显示全部内容,显......
  • Vue.js 组件基础 #yyds干货盘点#【yyds干货盘点】
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......
  • Vue项目首页实战 - 父子组组件间传值
    1cityHome.vue新增一个属性:<template><div><home-header:city="city"></home-header><home-swiper></home-swiper><home-icons></home-icons><home-recommend></home-recommend......
  • vue实现子父组件之间通信
    <template><div><button@click="handleClick":disabled="isLoading">{{isLoading?"loading":"submit"}}</button><divclass="err">......
  • android Button组件的属性和方法
    androidButton组件的属性和方法   一、相关属性     二、相关方法 setClickable(booleanclickable)设置按钮是否允许点击。clickable=true:允许点击clickable=false:禁止点击setBackgroundResource(intresid)通过资源文件设置背景色。resid:资源xml文件ID。按钮默认背......
  • .NET 使用ILPack组件将程序集保存成dll
    本文介绍使用ILPack组件将程序集保存成dll.netcore版本不再支持使用AssemblyBuilder.Save的方式将程序集保存成dll具体讨论https://github.com/dotnet/runtime/issues/15704可以使用ILPack组件将程序集保存成dll,以下为官方案例varassembly=Assembly.GetAssembly(t);......
  • vue组件之间的数据传递
    一、组件之间的关系父子关系、兄弟关系、跨级关系二、父子之间数据传递1、父组件向子组件传递【使用props】第一步:在父组件中使用子组件时,给子组件绑定属性第二步:在子组件中使用props接收绑定的属性值2、子组件向父组件传递【使用$emit】第一步:在子组件中通过......
  • 脚本组件界面布置
    脚本组件界面布置usingUnityEngine;publicclassJuse:MonoBehaviour{[Header("TypeOne")]//标题组名publicHusedis;publicGameObjectcia;publicGameObjectdia;[Space(50)]//两行之间间隙大小publicintdes;[Tooltip("Thisis......
  • vue3进阶——组件基础
    组件允许我们将UI划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构,这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。定义组件当使用构建步骤时,我们一般......