easyui datagrid数据互传

最新推荐文章于 2020-12-20 12:01:25 发布
最新推荐文章于 2020-12-20 12:01:25 发布
阅读量5.9k 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aa1049372051/article/details/21523761
版权

easyui datagrid数据互传



<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2><input id="getdatas" type="button" value="getdatas"></h2>
    


	<div style="float:left;margin-top:20px;overflow-y:scroll">
	<table id="select1" class="easyui-datagrid" title="Basic DataGrid" style="width:400px;height:300px"
			data-options="singleSelect:false,collapsible:true,url:'datagrid_data1.json',method:'get'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
	</div>

	<div style="float:left;margin-right:20px;margin-left:20px;">
    <div> <input id="add" type="button" name="button" value="" style="cursor:pointer;margin-top:50px;background-image:url(./images/green-arr-r.png);background-repeat:no-repeat;"></div>
    <div> <input id="jian" class='btn-sq-remove' type="button" name="button" value="" style="cursor:pointer;margin-top:50px;background-image:url(./images/gray-arr-l.png);background-repeat:no-repeat;"></div>
    <div> <input id="adds" class='btn-sq-all' type="button" name="button" value="" style="cursor:pointer;margin-top:50px;background-image:url(./images/blue-dbarr-r.png);background-repeat:no-repeat;"></div>
    <div> <input id="jians" class='btn-sq-empty' type="button" name="button" value="" style="cursor:pointer;margin-top:50px;background-image:url(./images/blue-dbarr-l.png);background-repeat:no-repeat;"></div>
</div>

<div style="float:left;margin-top:20px;overflow-y:scroll">
	<table id="select2" class="easyui-datagrid" title="Basic DataGrid" style="width:400px;height:300px"
			data-options="singleSelect:false,collapsible:true,url:'',method:'get'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
	</div>
   <input type="hidden" id="iddata" name='iddata'>

</body>
<script type="text/javascript">
//在左边选择一条添加到右边
$('#add').click(function(){
	var iddata='';
	var row=$('#select1').datagrid('getSelected'); //返回第一个选中的行没有就Null
	if(row)
	   $('#select2').datagrid('appendRow',row);       //追加一个新行。
	var rowindex=$('#select1').datagrid('getRowIndex',row);  //得到选中行的索引以便删除
	$('#select1').datagrid('deleteRow',rowindex);            //删除指定索引的行

	var newdatas=$('#select2').datagrid('getRows');          //返回当前页的行(是个二维数组)。用于获取右边数据的id以便后台保存数据库
	$.each(newdatas,function(key,value){
		iddata=iddata+value.itemid+',';
	});
    $('#iddata').val(iddata);
});

//在右到左
$('#jian').click(function(){
	var iddata='';
	var row=$('#select2').datagrid('getSelected'); //返回第一个选中的行没有就Null
	if(row)
	   $('#select1').datagrid('appendRow',row);       //追加一个新行。
	var rowindex=$('#select2').datagrid('getRowIndex',row);  //得到选中行的索引以便删除
	$('#select2').datagrid('deleteRow',rowindex);            //删除指定索引的行

	var newdatas=$('#select2').datagrid('getRows');          //返回当前页的行(是个二维数组)。用于获取右边数据的id以便后台保存数据库
	$.each(newdatas,function(key,value){
		iddata=iddata+value.itemid+',';
	});
    $('#iddata').val(iddata);
});

$('#adds').click(function(){
	var iddata='';
	var rows=$('#select1').datagrid('getSelections'); //返回所有选中的行，当没有选中的记录时，将返回空数组。
    $.each(rows,function(key,row){
		$('#select2').datagrid('appendRow',row);
		var rowindex=$('#select1').datagrid('getRowIndex',row);
	    $('#select1').datagrid('deleteRow',rowindex);
	});

	var newdatas=$('#select2').datagrid('getRows');          //返回当前页的行(是个二维数组)。用于获取右边数据的id以便后台保存数据库
	$.each(newdatas,function(key,value){
		iddata=iddata+value.itemid+',';
	});
    $('#iddata').val(iddata);

});

$('#jians').click(function(){
	var iddata='';
	var rows=$('#select2').datagrid('getSelections'); //返回所有选中的行，当没有选中的记录时，将返回空数组。
    $.each(rows,function(key,row){
		$('#select1').datagrid('appendRow',row);
		var rowindex=$('#select2').datagrid('getRowIndex',row);
	    $('#select2').datagrid('deleteRow',rowindex);
	});

	var newdatas=$('#select2').datagrid('getRows');          //返回当前页的行(是个二维数组)。用于获取右边数据的id以便后台保存数据库
	$.each(newdatas,function(key,value){
		iddata=iddata+value.itemid+',';
	});
    $('#iddata').val(iddata);

});

$('#getdatas').click(function(){
   $('#getdatas').val($('#iddata').val());
});
</script>
</html>

把代码保存为html文件放在easyui包的demo/datagrid文件夹下就能用了。不过按钮图片需要自己找


datagrid_data1.json数据


{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}



aa1049372051
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
datagrid传参_DataGrid（数据表格）
weixin_31304499的博客
12-23 1845
DataGrid(数据表格)扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。从现有的表格元素...
Easyui Datagrid 如何实现后台交互显示用户数据列表
Tomsheng321的专栏
02-23 5471
新手初学的时候可能有个疑问：如何在数据表格中不通过按钮事件直接显示后台列表信息？我在学习的时候也碰到了这个问题，纠结了很长时间，现在将代码贴出来给初学者以提示： 大家都知道EasyUi都是用json进行前后台数据交互的， datagrid有一个属性: url,可以直接到这个url中进行查询等后台操作，最后return一个json对象，这是datagrid可以直接接收这个 json对象，并自动
【第十五篇】easyui datagrid的列编辑，同时插入两张表的数据进去
agjblloc94239的博客
10-09 192
看图说话。 需求：插入两张表，上面的表单是第一张表的内容，下面的两个表格是第二张详情表的内容，跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的。 国际惯例，上代码 <div id="cc" class="easyui-layout" style="width: 100%; height: 380px;"> ...
关于同一页面内加载两个easyui的datagrid问题
glgom的博客
10-26 5879
关于同一页面内加载多个easyui的datagrid问题: 1.多个datagrid在页面加载时就显示出来，这时直接加载两个表格时是没问题的，都显示出来 $(function(){ $("#grid_1").datagrid("load",getGrid1()); $("#grid_2").datagrid("load",getGrid2()); }) 2.当页面初始时只显...
dataGrid显示另外一个dataGrid的数据（dataGrid移植）
手里有砖的程序猿
12-27 551
第一个dataGrid绑定一个dataset，dataset绑定datatype（datatype显示所有数据）  第二个dataGrid绑定同一个dataset，然后只需要显示需要的属性就行（显示部分而已）...
JS EasyUI DataGrid动态加载数据
03-15
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...
easyui datagrid 数据导出到Excel
03-25
下面将详细介绍两种有效的方法来实现EasyUI Datagrid数据导出到Excel的功能，并结合提供的文件名来推测具体实现步骤。 **方法一：使用JavaScript库（例如wxport）** 文件`wxport excel.txt`可能包含了使用wxport库...
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
09-01
在开发Web应用时，使用EasyUI的datagrid组件展示大量数据时，可能会遇到加载效率低下的问题。本文主要探讨如何针对EasyUI datagrid进行性能优化，以解决大数据量加载慢的问题。 首先，我们需要理解问题的根源。当...
jQuery Easyui datagrid/treegrid 清空数据
10-21
jQuery Easyui是一个基于jQuery的前端UI框架，提供了丰富的界面组件，其中_datagrid_和_treegrid_是用来展示表格和树形数据的组件。在实际开发中，经常需要在不同条件下清空数据，以确保用户界面和数据的一致性。...
easyui datagrid 表格 打印
01-11
4. **使用JavaScript打印库**：可以利用像jsPDF这样的库，将Datagrid数据转换为PDF文档，再进行打印。这种方式不仅能够保留格式，还便于用户保存和分享。 5. ** formatter回调**：在打印前，通过遍历Datagrid的所有...
easyui+数据导出为Excel
10-15
easyui框架下，进行纯前端的数据导出，存储为Excel文件。删除了许多未用到的东西，比较简洁，js与css需要使用自己的。主要需要xlsx.full.min.js。
Spring MVC+easyui+json传输数据，实现了增删改查、分页、生成饼柱状图等功能
11-06
本人在业余时间试着写了一个小型的超市管理系统。项目使用Spring MVC架构，界面纯粹使用Jquery-easyui，数据库使用oracle。这只是系统中一个很小的模块，适合初学者学习。传输数据的方式使用Ajax，json，数据动态生成饼状图，柱状图等功能。希望给诸位一些启发。好用记得好评哦
easyUI（前台和后台数据交互）
01-06
闲来无事，学习了一下easyUI。这是一个很简单的例子，给大家简单演示easyUI和后台的交互，包括数据的增删改查，希望给初学者有所帮助。使用的技术是ssm（springmvc+spring+mybatis）。这是一个maven项目。
Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】
Cowboy
11-27 1351
Easyui技术学习，更多知识请访问https://www.itkc8.com 前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据，同时对行内数据上移下移，所以对这几个功能做个总结。 1、首先大概说下这几个功能里用到的主要方法，行内添加数据主要是添加列的editor属性, 行内编辑主要使用beginEdit(), endEdit(),同时一个关键就是拿到当前的操作行索...
easyui 如何同时左右显示两个datagrid
jia_zhengshen的专栏
11-11 7604
||||||
两个datagrid的数据移动(支持多选)
weixin_30659829的博客
06-14 228
1.需求 :点击卸车和撤销按钮可以实现 1和2 之间数据的移动(支持多选) 2. 代码 (这里只写一个撤销的功能) //撤销按钮 function moveOut() { var item = $('#datagrid_2').datagrid('getChecked'); //获取待卸车的勾选数据 if (item.leng...
easyui框架前后端交互_easyui dataGrid与后台交互传递数据
weixin_39622562的博客
12-20 1242
1.前台向后台传递数据属性queryParams，传递json类型的参数给后台除了queryParams指定参数外，dataGrid默认传递page rows两个参数给后台。属性url：指定后台数据接口地址pageSize:指定每页显示数据量$('#sourceDG').datagrid({url:"data.json",pageSize:10,queryParams: {source_type:...
c#大圣之路——c#获取DataGrid中选中行某一列的数据，传到其他页面，实现页面间数据传递...
weixin_30922589的博客
01-11 171
　//前端JavaScript function OpenNominationChannelApprove(co_id) { // var currentChannelType = $("#ddlchnltype").children('option:selected').val(); var curren...
EasyUI DataGrid 回车切换编辑单元格实现方法
在EasyUI框架中，DataGrid是一个常用的表格组件，它支持数据的展示、编辑和操作。这个示例主要解决的是在DataGrid的编辑模式下，如何通过按下回车键来切换到下一个单元格进行编辑的问题。以下是对这段代码的详细解释...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值