easyui中表格实现下拉联动,编辑功能

功能要求:点击编辑按钮时,车辆型号,车牌号码,司机和司机电话可以编辑;其中车牌号码根据车辆型号进行筛选,司机和司机电话根据车牌号码带出来。

代码如下:

<script>
	var testIndex = 0; 
    $(function () {
        $('#zd_table').datagrid({
					width: 1080,
					height: 'auto' + 1,
					checkOnSelect: true,
					singleSelect: false,//用于多选
					rownumbers: false,
					onLoadSuccess: onloadTable,
					//onClickRow: onDbClickRow,
					onBeforeEdit: function (index, row) {
						row.editing = true;
						$('#zd_table').datagrid('refreshRow', index);
					},
					onAfterEdit: function (index, row) {
						row.editing = false;
						$('#zd_table').datagrid('refreshRow', index);
					},
					columns: [
						[
							{
								field: 'oprator', title: '操作', width: 80, align: 'center',
								formatter: function (value, row, index) {
									if (row.editing) {
										var s = '<a href="#" onclick="saverow2(' + index + ')">保存</a> ';
										var c = '<a href="#" onclick="deleterow2(' + index + ')">删除</a>';
										return s + c;
									} else {
										var e = '<a href="#" onclick="editrow2(' + index + ')">编辑</a> ';
										var d = '<a href="#" onclick="deleterow2(' + index + ')">删除</a>';
										return e + d;
									}
								}
							},
							{
								field: 'id',
								title: 'ID',
								width: '5%',
								hidden: true
							},
							{
								field: 'dcbCode',
								title: '子单号',
								width: '15%'
							},
							{
								field: 'shippingSite',
								title: '发货站点',
								width: '15%',
								formatter: function (value, row) {
									return row.shippingSiteCodeName;
								},
							}, {
								field: 'receivingSite',
								title: '收货站点',
								width: '15%',
								formatter: function (value, row) {
									return row.receivingSiteCodeName;
								},
							},
							{
								field: 'kilometers',
								title: '公里数KM',
								width: '6%',
								formatter: highlightData_kilometers,
							}, {
								field: 'freight',
								title: '运费',
								width: '6%',
								formatter: highlightData_freight,
							},
							{
								field: 'carName',
								title: '车辆型号',
								width: '10%',
								editor: {
									type: 'combogrid',
									options: {
										panelWidth: 450,
										panelHeight: '320',
										mode: 'remote',
										idField: 'carName',
										textField: 'carName',
										queryParams: { 'status': 0 },
										url: '<%=basePath %>/carType/list',
										pagination: true,
										columns: [[
											{ field: 'carNum', title: '编码', width: 150 },
											{ field: 'carName', title: '名称', width: 298 }
										]],
										pageSize: 500,
										pageList: [100, 500],
										onSelect: function (rowIndex, rowData) {
											var target = $('#zd_table').datagrid('getEditor', { 'index': testIndex, 'field': 'dcbCarnum' }).target;
											var target2 = $('#zd_table').datagrid('getEditor', { 'index': testIndex, 'field': 'dcbDriverName' }).target;
											var targetphone = $('#zd_table').datagrid('getEditor', { 'index': testIndex, 'field': 'dcbDriverPhone' }).target;
											target2.textbox('clear'); //清除原来的数据
											targetphone.textbox('clear'); 
											target.combogrid('clear'); 
											target.combogrid({
												url: "<%=basePath %>/car/index",//获取数据
												method: "post",
												queryParams: { 'queryFlag': 1, 'isAudit': 1, 'status': 1, 'code': '${distributeCar.carrierCode}', 'cartypeId': rowData.carNum },
												panelWidth: 420,
												panelHeight: '340',
												idField: 'license',
												textField: 'license',
												//valueField: 'license',
												pagination: true,
												columns: [[
													{ field: 'license', title: '车牌', width: 265 },
													{ field: 'shareInd', title: '是否共享', width: 150 }
												]],
												pageSize: 100,
												pageList: [100],
											})
										}
									}
								}
							},
							{
								field: 'dcbCarnum',
								title: '车牌号码',
								width: 100,
								editor: {
									type: 'combogrid',
									options: {
										onSelect: function (rowIndex, rowData) {
											var target = $('#zd_table').datagrid('getEditor', { 'index': testIndex, 'field': 'dcbDriverName' }).target;
											var targetphone = $('#zd_table').datagrid('getEditor', { 'index': testIndex, 'field': 'dcbDriverPhone' }).target;
											target.textbox('clear'); //清除原来的数据
											targetphone.textbox('clear'); //清除原来的数据
											var parameters = {
												id: rowData.license,
												dr: 0
											};
											$.ajax({
												url: "<%=basePath%>/car/returnOne",
												type: 'POST',
												timeout: 60000,
												data: parameters,
												async: false,
												success: function (data, textStatus, jqXHR) {
													var obj = JSON.parse(data); //转换成json对象
													target.textbox('setValue', obj.driverName);
													targetphone.textbox('setValue', obj.telphone);

												}
											});
										}
									}
								}
							}
							,
							{
								field: 'dcbDriverName',
								title: '司机',
								width: 80,
								editor: {
									type: 'textbox',
									options: {

									}
								}
							},
							{
								field: 'dcbDriverPhone',
								title: '司机电话',
								width: 100,
								editor: {
									type: 'textbox',
									options: {
										validType:'mobile'
									}
								}
							},
							{
								field: 'startAddress',
								title: '起点地址',
								width: '15%'
							}, {
								field: 'endAddress',
								title: '目的地址',
								width: '15%'
							}, {
								field: 'returnFlag',
								title: '是否安排退货',
								width: '10%',
								formatter: formatterSwitch,
							}
						]
					],
				}).datagrid('loadData', checkedShipmentsSite).datagrid('acceptChanges');


	     //编辑
			function editrow2(index) {
			   flagEdit=false;
			    testIndex = index;
				$('#zd_table').datagrid('beginEdit', index);
			}

    })
    
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

~犇犇~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值