DataGird는 EasyUI에서 데이터 목록을 표시하는 데 사용됩니다. 필요에 따라 다른 열을 표시해야 하는 경우가 있습니다. 예를 들어 권한 관리에서 다른 사용자는 로그인한 후 자신의 권한 내에서만 목록 필드를 볼 수 있습니다. DataGird.Column의 동적 조합 다음은 EasyUI에서 DataGird를 사용하여 열을 동적으로 생성하는 방법을 소개합니다.
DataGird는 실제로 DataGird의 columns 속성 값을 제어하는 열을 동적으로 생성합니다. 다음으로 바인딩을 위해 ajax를 통해 배경 열의 데이터를 비동기적으로 호출합니다.
<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>
위는 에디터가 소개한 jQuery EasyUI에서 DataGird로 컬럼을 동적으로 생성하는 방법입니다. 많은 분들께 도움이 되었으면 좋겠습니다!