ホームページ > 記事 > ウェブフロントエンド > jQuery EasyUI_jquery で DataGird を使用して列を動的に生成する方法
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によるカラムを動的に生成する方法でしたので皆さんの参考になれば幸いです!