How to dynamically generate columns with DataGird in jQuery EasyUI_jquery

DataGird is used to display the data list in EasyUI. Sometimes it is necessary to display different columns as needed. For example, in permission management, different users can only view the list fields within their own permissions after logging in, which requires dynamic combination of DataGird. Column, the following introduces the method of dynamically generating columns by DataGird in EasyUI.

DataGird dynamically generates columns, which actually controls the columns attribute value of DataGird. Next, asynchronously call the data of background columns through ajax for binding.

<table id="dg"></table>
<script>
function easyUIDataGrid(medid) {
var $datagrid = {};
var columns = new Array();
$datagrid.title = "";
$datagrid.height = $(window).height() - 31;
$datagrid.width = $(window).width();
$datagrid.sortName = "dt";
$datagrid.sortOrder = "desc";
$datagrid.idField = "id";
var param = { "medid": medid };
$.ajax({
url: 'getCol.page',
type: 'post',
data: "medid=" + medid,
dataType: "json",
async: false,
success: function (returnValue) {
　　　　　　　　　　　　//异步获取要动态生成的列 别名，宽度也可以
var arr = returnValue;
$.each(arr, function (i, item) {
columns.push({ "field": item.colname, "title": item.colalias, "width": 100, "sortable": true });
});
$datagrid.columns = new Array(columns);
$('#dg').datagrid($datagrid);
}
});
}
</script>

The above is the method of dynamically generating columns by DataGird in jQuery EasyUI introduced by the editor. I hope it will be helpful to everyone!