Maison > Article > interface Web > Comment générer dynamiquement des colonnes avec DataGird dans jQuery EasyUI_jquery
DataGird est utilisé pour afficher la liste de données dans EasyUI. Parfois, il est nécessaire d'afficher différentes colonnes selon les besoins. Par exemple, dans la gestion des autorisations, différents utilisateurs ne peuvent afficher les champs de la liste qu'avec leurs propres autorisations après s'être connectés. combinaison dynamique de DataGird Column, ce qui suit présente la méthode de génération dynamique de colonnes par DataGird dans EasyUI.
DataGird génère dynamiquement des colonnes, qui contrôlent en fait la valeur de l'attribut des colonnes de DataGird. Ensuite, appelez de manière asynchrone les données des colonnes d'arrière-plan via ajax pour la liaison.
<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>
Ce qui précède est la méthode de génération dynamique de colonnes par DataGird dans jQuery EasyUI introduite par l'éditeur. J'espère qu'elle sera utile à tout le monde !