datagrid 动态加载列 column

最新推荐文章于 2019-09-20 11:47:00 发布

原创最新推荐文章于 2019-09-20 11:47:00 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的数据表格加载过程，包括初始化加载、数据格式化及表格配置等关键步骤。通过分析代码，展示了如何设置列标题、对齐方式及排序功能，并实现了点击行时触发特定操作。

/**
	 * 初始加载
	 */
	$(document).ready(function() {
		loadDatagrid();
	});

	/**
	 * 数据加载
	 */
	function loadDatagrid() {
		//debugger;
		var columns = new Array();

		var dataGridColumnValStr = $.trim($("#DataGridColumnVal").text());
		var dataGridColumnFieldStr = $.trim($("#DataGridColumnField").text());

		if (dataGridColumnValStr != null && dataGridColumnValStr != "" && dataGridColumnValStr != "null"
				&& typeof (dataGridColumnValStr) != "undefined") {

			var colValArray = dataGridColumnValStr.split(",");
			var colFieldArray = dataGridColumnFieldStr.split(",");

		for (var i = 0; i < colValArray.length; i++) {
				var column = {};
				column["field"] = colFieldArray[i];
				column["title"] = colValArray[i];
				column["sortable"] = true;
				column["halign"] = "center";
				column["align"] = "right";

				columns.push(column);
			}
		}

		$('#dg_sub').datagrid({
			singleSelect : true,
			pagination : true,

			loadMsg : "",
			url : ctx + "/acc/balance_sheet/ajax_balance_sheet_query",
			queryParams : {

			},
			columns : [
				columns
			],
			onClickRow : function(rowIndex, rowData) {
				if (rowData.vCreate_by == 0) {
					$("#history").attr("onclick", "returnTo('history')");
					$("#history").css("background-color", "");
				} else {
					$("#history").attr("onclick", "");
					$("#history").css("background-color", "gray");
				}
				$("#au_desc").val(rowData.au_desc);
				$("#description").val(rowData.description);
				$("#create_date").val(new Date(rowData.create_date).format("yyyy-MM-dd"));
				$("#create_by").val(rowData.create_by);
				$("#group_description").val(rowData.group_description);
				$("#approve_by").val(rowData.approve_by);
				$("#post_by").val(rowData.post_by);
			},
			onLoadError : function() {
				grid_layer_close();
				$('#dg_sub').datagrid('options').loadMsg = loadingMsg;
			},
			onLoadSuccess : function(data) {
				grid_layer_close();
				$('#dg_sub').datagrid('options').loadMsg = loadingMsg;

				$('#dg_sub').datagrid('selectRecord', '${voucherLineId}');

			}
		});
	}