Print Page - Adding a second textbox header row in datagrid

I need a second textbox header row in datagrid and wonder if that is possible to add?

The purpose is to give the user the option to update a table column using this textbox row and push set. I can manage the set code but need help in how to configure a second column row and overwrite the column names with textbox.

Here's an image example attached of how it should look. The "SET" row is what I want to add.
(http://)

My example code where the column is repeated two times. However the first should be the text boxes, just like the filter pane implements.

Code:

	<table id="tt"></table>
	<script>
		var products = [
		    {productid:'FI-SW-01',name:'Koi'},
		    {productid:'K9-DL-01',name:'Dalmation'},
		    {productid:'RP-SN-01',name:'Rattlesnake'},
		    {productid:'RP-LI-02',name:'Iguana'},
		    {productid:'FL-DSH-01',name:'Manx'},
		    {productid:'FL-DLH-02',name:'Persian'},
		    {productid:'AV-CB-01',name:'Amazon Parrot'}
		];
		var data = {
			"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" }
			]
		};
		var columns = [
			{ field: 'itemid', title: 'Item ID', width: 60 },
			{
				field: 'productid', title: 'Product', width: 100,
				formatter: function (value, row) {
					return row.productname || value;
				},
				editor: {
					type: 'combobox',
					options: {
						valueField: 'productid',
						textField: 'name',
						data: products,
						required: true
					}
				}
			},
			{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
			{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox' },
			{ field: 'attr1', title: 'Attribute', width: 180, editor: 'text' },
			{
				field: 'status', title: 'Status', width: 50, align: 'center',
				editor: {
					type: 'checkbox',
					options: {
						on: 'P',
						off: ''
					}
				}
			},
			{
				field: 'action', title: 'Action', width: 80, align: 'center',
				formatter: function (value, row, index) {
					if (row.editing) {
						var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
						var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
						return s + c;
					} else {
						var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
						var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';
						return e + d;
					}
				}
			}
		];
		$(function(){
			$('#tt').datagrid({
				title:'Editable DataGrid',
				iconCls:'icon-edit',
				width:660,
				height:250,
				singleSelect:true,
				idField:'itemid',
				data:data,
				columns: [columns, columns],
				onEndEdit:function(index,row){
					var ed = $(this).datagrid('getEditor', {
						index: index,
						field: 'productid'
					});
					row.productname = $(ed.target).combobox('getText');
				},
				onBeforeEdit:function(index,row){
					row.editing = true;
					$(this).datagrid('refreshRow', index);
				},
				onAfterEdit:function(index,row){
					row.editing = false;
					$(this).datagrid('refreshRow', index);
				},
				onCancelEdit:function(index,row){
					row.editing = false;
					$(this).datagrid('refreshRow', index);
				}
			}).datagrid('enableFilter');
		});
		function getRowIndex(target){
			var tr = $(target).closest('tr.datagrid-row');
			return parseInt(tr.attr('datagrid-row-index'));
		}
		function editrow(target){
			$('#tt').datagrid('beginEdit', getRowIndex(target));
		}
		function deleterow(target){
			$.messager.confirm('Confirm','Are you sure?',function(r){
				if (r){
					$('#tt').datagrid('deleteRow', getRowIndex(target));
				}
			});
		}
		function saverow(target){
			$('#tt').datagrid('endEdit', getRowIndex(target));
		}
		function cancelrow(target){
			$('#tt').datagrid('cancelEdit', getRowIndex(target));
		}
		function insert(){
			var row = $('#tt').datagrid('getSelected');
			if (row){
				var index = $('#tt').datagrid('getRowIndex', row);
			} else {
				index = 0;
			}
			$('#tt').datagrid('insertRow', {
				index: index,
				row:{
					status:'P'
				}
			});
			$('#tt').datagrid('selectRow',index);
			$('#tt').datagrid('beginEdit',index);
		}
	</script>

Thanks for any help!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: WizPS on June 12, 2019, 03:05:27 PM