ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery EasyUI_jquery で DataGird を使用して列を動的に生成する方法

jQuery EasyUI_jquery で DataGird を使用して列を動的に生成する方法

WBOY
リリース: 2016-05-16 15:06:44
オリジナル
1390 人が閲覧しました

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によるカラムを動的に生成する方法でしたので皆さんの参考になれば幸いです!

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート