jQuery easyUI的datagrid在翻页之后记录被选中的行

最近修改一个以前的项目,前端有一个地方是用到 jQuery 的 datagrid 框架,需求是实现 datagrid 在翻页之后记录被选中的行,返回之前的页时选中项还在,所以就记录了一下实现过程。

大概思路如下:

(1)设置 idField:‘pkIotDeviceId’,其中 pkIotDeviceId 代表表示每一行的唯一标识码,一般为数据的主键。

设置了 idField:‘pkIotDeviceId’ 之后,翻页然后返回去,选中项还在。

由于需求还需要选中左边列表数据之后,添加到右边的表格中,所以还要进行一系列操作。

(2)由于需要实现点击左边一行,便向右边表格添加一项,重复点击,则取消该行的选中状态,右边表格随即删除对应的数据项,所以还要定义 onCheck() 和 onUncheck() 函数。

(3)当全部选中时,如果将所有数据添加到右边表格,则有可能会出现重复数据,因为有的行可能之前已经处于选中状态,所以定义 onSelectAll() 判断之前有没有处于选中状态,处于选中状态的数据不重复添加到右边表格,定义onUnselectAll() 函数,全部取消时,删除右边列表中相应数据。

相关代码如下:

<div id="cc" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'设备列表',split:true,collapsible:false,border:false" style="width:62%;">
    	<table id="taskdg_orderInfo">
    		<thead>
          		<tr>
          			<th data-options="field: '', width: '50', checkbox: true"></th>
            		<th data-options="title: '设备名称', field: 'name', width: '300', sortable : true"></th>
            		<th data-options="title: '所属区域', field: 'districtName',width:'150'"></th>
            		<th data-options="title: '管理部门', field: 'deptName',width:'150'"></th>
            		<th data-options="title: '锁状态', field: 'lockStatus',width:'100',formatter:task_convertLockState"></th>
            		<th data-options="title: '在线状态', field: 'onLine',width:'100',formatter:task_covertOnline"></th>
            		<th data-options="title: '芯片温度', field: 'chipTemperature',width:'100'"></th>
            		<th data-options="title: '电池电压', field: 'batteryVoltage',width:'100'"></th>
          		</tr>
        	</thead>
    	</table>
    </div>
    <div data-options="region:'center',title:'操作项列表',border:false" style="width:38%;">
    			<table id="taskdg_operationInfo"></table>
    	</div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
	<![CDATA[
		
		var task_JGData = null;//存储左边表格数据
		var task_selectedJG = [];//存储左边表格选中数据
		var task_pkDistrictId = "";
		var task_user=/*[[${session.znsk2p_user}]]*/;
		var pageSize = 20;
		
		var changeOrderTasks = function (sort, order) {
			task_sortCol = sort;
			task_sortOrder = order;
		}
		var changePageTasks = function (index, size) {
			pagenumber = index;
			pagesize = size;			
		}
				
		/*--------------------------------------------- table初始化  --------------------------------------------*/
		function task_loadTaskTable(){
			$('#taskdg_orderInfo').datagrid({
				fit : true,
				striped : true,
				multiSort: false,
				showHeader: true,
				pagination: true,
				rownumbers: false,
				checkOnSelect: true,//如果设置为 true,当点击某一行时,会选中/取消选中复选框,如果设置为false,只有当点击了复选框时,才会选中/取消选中复选框				
				selectOnCheck: true,//如果设置为 true,点击复选框将会选中该行。如果设置为 false,选中该行将不会选中复选框								
				singleSelect : false,//设置表格为复选模式
				sortName : 'name',
				toolbar: '#tb_task',
				idField:'pkIotDeviceId',//必须设置主键,否则翻页后,前面选中的会失效。 
				pageSize : pageSize,
				pageList : [ 10, 20, 30, 40, 50 ],
				//选中一行,右边列表添加对应行
				onCheck : function(index, row){	
					var res = task_judgeSameEle(row,task_selectedJG);
					if(res){
						task_selectedJG.push({
							'name' : row.name,
							'PKId' : '',
							'StationPKId' : '',
							'TaskPKId' : '',
							'ObjPKId' : row.pkIotDeviceId,
						});
					} 					
					task_loadOperation(task_selectedJG);
				},
				//取消选中的某一行,右边列表去掉对应行
				onUncheck : function(index, row){
					for(var i in task_selectedJG){
						if(row.pkIotDeviceId == task_selectedJG[i].ObjPKId){
							task_selectedJG.splice(i,1);
						}
					}
					task_loadOperation(task_selectedJG);
				},
				//选中当前页面所有行 
				onSelectAll: function(index,row){	
					var len = index.length;
					for(var i = 0; i < len; i++){
						var res = task_judgeSameEle(index[i],task_selectedJG);
						if(res){
							task_selectedJG.push({
								'name' : index[i].name,
								'PKId' : '',
								'StationPKId' : '',
								'TaskPKId' : '',
								'ObjPKId' : index[i].pkIotDeviceId,
							})	
						}											
					}
					task_loadOperation(task_selectedJG);
				},
				//取消选中当前页面所有行 
				onUnselectAll: function(index,row){
					var indexLen = index.length;
					for(var j = 0; j < indexLen; j++){
						for(var k in task_selectedJG){
							if(index[j].pkIotDeviceId == task_selectedJG[k].ObjPKId){
								task_selectedJG.splice(k,1);
							}
						}
					} 				
					task_loadOperation(task_selectedJG);
				},
				onSortColumn: function (sort, order) {
					changeOrderTasks(sort, order);
					task_loadJGData();
				},
				//表格加载成功函数
				onLoadSuccess: function (data){
					var datalen = data.rows.length;
					var selectedlen = task_selectedJG.length;
					if(selectedlen != 0){
						for(var i = 0; i < datalen; i++){
							for(var j = 0; j < selectedlen; j++){
								if(task_selectedJG[j].ObjPKId === data.rows[i].pkIotDeviceId){
									$("#taskdg_orderInfo").datagrid('checkRow',i);
								}
							}
						}
					}
				}
			});
			
			var p = $('#taskdg_orderInfo').datagrid('getPager');
			$(p).pagination({
				onSelectPage: function (pageNumber, pageSize) {
					changePageTasks(pageNumber, pageSize);
					task_loadJGData();
				},
				onChangePageSize: function (pageNumber, pageSize) {
					changePageTasks(pageNumber, pageSize);
					task_loadJGData();
				},
				onRefresh: function (pageNumber, pageSize) {
					changePageTasks(pageNumber, pageSize);
					task_loadJGData();
				}
			});
		}
		
		function task_loadTaskItemTable(){
			$('#taskdg_operationInfo').datagrid({
				striped : true,
				rownumbers : true,
				showHeader:true,
				singleSelect : false,
				multiSort : false,
				fit : true,
				toolbar: '#tasktb_operationInfo',
				sortName : 'stationPkid',
				columns: [
					[
						{
							field: 'name',
							title: '设备名称',
							width: 460,
						},
						{
							field: 'pkIotDeviceId',
							title: '设备类型ID',
							width: 200,
							hidden: true
						}
					]
				]
			});
		}
		
		$(function() {					
			changeOrderTasks("name", "asc");
			changePageTasks(1, pageSize);
			
			//井盖列表初始化
			task_loadTaskTable();
			//操作项列表初始化
			task_loadTaskItemTable();
			task_loadJGData();			
		});
		
		/*--------------------------------- 保存当前所选操作项和锁控任务,开锁控票     -------------------------------------------*/
		function task_save(){	
			var StationPKId = "";
			var rows = $('#taskdg_operationInfo').datagrid('getData');
			if(rows.total === 0){
				$.messager.alert('信息提示', '请选择需要操作的井盖!', 'info');
			}else{			
				var task = {};
				task.StationPKId = StationPKId;
				task.TaskName = $("#task_orderName").val();   //任务名称;
				task.Operator = $("#task_operatorName").val();  //操作人;
				task.Remark = $("#task_note").val();          //备注;
				
				task.Writer = task_user.name;
				task.Authorizer = task_user.name;

				task.StartTime = sTime;
				task.EndTime = eTime;
				task.Status = 0;				
				task.DeptPKId = task_user.departPKId;
				task.Department = $('#task_depart').val();
				task.Staff = $('#task_staffName').val();
				task.Phone = $('#task_phone').val();
				
				task.items = [];
				
				for(var i = 0; i < rows.total; i++){
					var item = {};
					item.ObjType = 1;
					item.Sequence = i+1;
					item.StationPKId = StationPKId;				
					item.ObjPKId = rows.rows[i].ObjPKId;					
					task.items.push(item);
				}
				
				//对象转化为字符串形式
				var createorder = JSON.stringify(task);	
				debugger;
				$.ajax({
					type : 'POST',
					url : '../createorder/save',
					data : createorder,
					dataType : 'json',
					contentType : 'application/json',
					success : function(data) {
						if (data.IsSuccess) {							
							$.messager.alert('信息提示', '操作成功!', 'info');
							task_refreshPage();						
						} else {
							$.messager.alert('信息提示', '操作失败:' + data.Message, 'error');
						}
					}
				});
			}		    
		}
		
		/*--------------------------------- 点击取消按钮 事件      -------------------------------------------*/
		function task_revokeSelected(){
			task_refreshPage();
		}
		
		/*--------------------------------- 页面回到初始化状态     -------------------------------------------*/
		function task_refreshPage(){	
			task_street = null;			
			task_district = null;
			$("#task_note").textbox('setValue','');	
			$('#task_phone').textbox('setValue','');
			$('#task_depart').textbox('setValue','');
			$('#task_staffName').textbox('setValue','');				
			$('#task_selectDevice').combobox('select','');
			$('#task_selectStreet').combobox('select','全部');			
			$('#task_selectDistrict').combobox('select','全部');
			$("#task_orderName").textbox('setValue','智能锁控任务');
			$('#task_operatorName').combobox('select',task_user.name);
			
			$('#taskdg_orderInfo').datagrid('getPager').pagination({
				pageSize: 20,
				pageNumber: 1
			});
			changePageTasks(1, 20);
			task_loadJGData();
			$("#taskdg_orderInfo").datagrid('clearSelections');//清空表格选中项
			task_selectedJG = [];
			task_loadOperation(task_selectedJG);	
		}
				
		//判断元素是否在数组中,判断左边“井盖列表”中选中的操作项是否已存在于数组中
		function task_judgeSameEle(row,task_selectedJG){
			var len = task_selectedJG.length;
			if(len != 0){
				for(var i in task_selectedJG){
					if(row.pkIotDeviceId === task_selectedJG[i].ObjPKId){
						return false;				
					}
				}
			}
			return true;
		}		
		
		/*-------------------------------------------------- 获取井盖列表的数据    --------------------------------------------------*/
		//获取井盖列表的数据
		function task_loadJGData() {	
			var areaCode = task_getAreaCode();
			var task_districtPkid = areaCode;
			var task_code = "";
			var task_deviceTypePkid = $('#task_selectDevice').val();
			var task_devName = $('#task_devname').val();
			$.ajax({
				type: 'POST',
				url: '/iotdevice/page',
				data: "pageSize=" + pagesize + "&pageIndex=" + pagenumber + "&code=" + task_code + "&name=" +
				task_devName + "&deviceTypePkid=" + task_deviceTypePkid + "&districtPkid=" + task_districtPkid + "&sort=" +
					task_sortCol + "&order=" + task_sortOrder,
				error: function (XMLHttpRequest, textStatus, errorThrown) {
				},
				success: function (result) {
					if (result.IsSuccess) {		
						// debugger;
						task_JGData = result.Data;
						// 填充左边表格数据
						task_loadOrder(task_JGData);
					} else {
						$.messager.alert('错误提示', result.Message, 'warning');
					}
				}
			});
		}
		/*-------------------------------------------------- 填充表格数据  --------------------------------------------------*/
		
		//填充井盖列表数据
		function task_loadOrder(task_JGData){
			$('#taskdg_orderInfo').datagrid('loadData', task_JGData);
		}		
		//填充操作项列表数据
		function task_loadOperation(task_selectedJG){
			$('#taskdg_operationInfo').datagrid('loadData', task_selectedJG); 
		}
				
		/*-------------------------------------------------- 表格数据转换  --------------------------------------------------*/
		function task_convertLockState(lockstate){
			if(lockstate == "0"){
				return "闭锁";
			}else{
				return "开锁";
			}

		}		
		function task_covertOnline(onLine){
			if(onLine == 0){
				return "离线";
			}else{
				return "在线";
			}
		}
		
	]]>
</script>

如下图所示,选中第一页两条数据之后,翻页再选中两条数据,返回第一页之后选中数据仍然处于被选中的状态,右边表格是左边表格选中数据的填充:
在这里插入图片描述
参考博客:
https://www.cnblogs.com/mabaishui/p/5757637.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据来源:中经数据库 主要指标110多个(全部都是纯粹的 市辖区 指标),大致是: GDP GDP增速 第一产业增加值占GDP比重 第二产业增加值占GDP比重 第三产业增加值占GDP比重 人均GDP 社会消费品零售总额 固定资产投资(不含农户) 新设外商投资企业数_外商直接投资 实际利用外资金额(美元) 一般公共预算收入 一般公共预算支出 一般公共预算支出_教育 一般公共预算支出_科学技术 金融机构人民币各项存款余额_个人储蓄存款 金融机构人民币各项存款余额 金融机构人民币各项贷款余额 规模以上工业企业单位数 规模以上工业企业单位数_内资企业 规模以上工业企业单位数_港澳台商投资企业 规模以上工业企业单位数_外商投资企业 规模以上工业总产值 规模以上工业总产值_内资企业 规模以上工业总产值_港澳台商投资企业 规模以上工业总产值_外商投资企业 规模以上工业企业流动资产合计 规模以上工业企业固定资产合计 规模以上工业企业利润总额 规模以上工业企业应交增值税 规模以上工业企业主营业务税金及附加 户籍人口数 年均户籍人口数 户籍人口自然增长率 第一产业就业人员占全部城镇单位就业人员比重 第二产业就业人员占全部城镇单位就业人员比重 第三产业就业人员占全部城镇单位就业人员比重 城镇非私营单位就业人员数 城镇非私营单位就业人员数_第一产业 城镇非私营单位就业人员数_第二产业 城镇非私营单位就业人员数_第三产业 城镇非私营单位就业人员数_农、林、牧、渔业 城镇非私营单位就业人员数_采矿业 城镇非私营单位就业人员数_制造业 城镇非私营单位就业人员数_电力、热力、燃气及水生产和供应业 城镇非私营单位就业人员数_建筑业 城镇非私营单位就业人员数_批发和零售业 城镇非私营单位就业人员数_交通运输、仓储和邮政业 城镇非私营单位就业人员数_住宿和餐饮业 城镇非私营单位就业人员数_信息传输、软件和信息技术服务业 城镇非私营单位就业人员数_金融业 城镇非私营单位就业人员数_房地产业 城镇非私营单位就业人员数_租赁和商务服务业 城镇非私营单位就业人员数_科学研究和技术服务业 城镇非私营单位就业人员数_水利、环境和公共设施管理业 城镇非私营单位就业人员数_居民服务、修理和其他服务业 城镇非私营单位就业人员数_教育 城镇非私营单位就业人员数_卫生和社会工作 城镇非私营单位就业人员数_文化、体育和娱乐业 城镇非私营单位就业人员数_公共管理、社会保障和社会组织 城镇非私营单位在岗职工平均人数 城镇就业人员数_私营企业和个体 城镇非私营单位在岗职工工资总额 城镇非私营单位在岗职工平均工资 城镇登记失业人员数 建成区面积 建设用地面积 建设用地面积_居住用地 液化石油气供气总量 液化石油气供气总量_居民家庭 人工煤气、天然气供气总量 人工煤气、天然气供气总量_居民家庭 液化石油气用气人口 人工煤气、天然气用气人口 城市公共汽电车运营车辆数 城市出租汽车运营车辆数 城市公共汽电车客运总量 道路面积 排水管道长度 建成区绿化覆盖面积 建成区绿化覆盖率 绿地面积 公园绿地面积 维护建设资金支出 土地面积 生活用水供水量 供水总量 全社会用电量 城乡居民生活用电量 工业生产用电量 房地产开发投资 房地产开发投资_住宅 限额以上批发和零售业法人单位数 限额以上批发和零售业商品销售总额 普通中学学校数 中等职业教育学校数 普通小学学校数 普通高等学校专任教师数 普通中学专任教师数 中等职业教育专任教师数 普通小学专任教师数 普通高等学校在校生数 普通中学在校生数 中等职业教育在校生数 普通小学在校生数 电视节目综合人口覆盖率 公共图书馆总藏量_图书 医疗卫生机构数_医院和卫生院 卫生人员数_执业(助理)医师 医疗卫生机构床位数_医院和卫生院 城镇职工基本养老保险参保人数 职工基本医疗保险参保人数 失业保险参保人数
机器学习是一种人工智能(AI)的子领域,致力于研究如何利用数据和算法让计算机系统具备学习能力,从而能够自动地完成特定任务或者改进自身性能。机器学习的核心思想是让计算机系统通过学习数据中的模式和规律来实现目标,而不需要显式地编程。 机器学习应用非常广泛,包括但不限于以下领域: 图像识别和计算机视觉: 机器学习在图像识别、目标检测、人脸识别、图像分割等方面有着广泛的应用。例如,通过深度学习技术,可以训练神经网络来识别图像中的对象、人脸或者场景,用于智能监控、自动驾驶、医学影像分析等领域。 自然语言处理: 机器学习在自然语言处理领域有着重要的应用,包括文本分类、情感分析、机器翻译、语音识别等。例如,通过深度学习模型,可以训练神经网络来理解和生成自然语言,用于智能客服、智能助手、机器翻译等场景。 推荐系统: 推荐系统利用机器学习算法分析用户的为和偏好,为用户推荐个性化的产品或服务。例如,电商网站可以利用机器学习算法分析用户的购买历史和浏览为,向用户推荐感兴趣的商品。 预测和预测分析: 机器学习可以用于预测未来事件的发生概率或者趋势。例如,金融领域可以利用机器学习算法进股票价格预测、信用评分、欺诈检测等。 医疗诊断和生物信息学: 机器学习在医疗诊断、药物研发、基因组学等领域有着重要的应用。例如,可以利用机器学习算法分析医学影像数据进疾病诊断,或者利用机器学习算法分析基因数据进疾病风险预测。 智能交通和物联网: 机器学习可以应用于智能交通系统、智能城市管理和物联网等领域。例如,可以利用机器学习算法分析交通数据优化交通流量,或者利用机器学习算法分析传感器数据监测设备状态。 以上仅是机器学习应用的一部分,随着机器学习技术的不断发展和应用场景的不断拓展,机器学习在各个领域都有着重要的应用价值,并且正在改变我们的生活和工作方式。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值