Webインタフェース開発ツール!Kendo UI for jQueryデータ管理のロック列
3322 ワード
Kendo UI for jQuery R 2020 SP 1試用版ダウンロード
Kendo UIは現在、Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React、Kendo UI Support for Vueの4つのコントロールを最新に提供しています.Kendo UI for jQueryは、現代のWebアプリケーションを作成する最も完全なUIライブラリです.
列をロック(フリーズ)すると、ユーザーがグリッドを水平にスクロールするときに常に特定の列を表示できます.
実行可能な例については、Gridでロックされたカラムを実装する方法の説明を参照してください.
Kendo UIは現在、Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React、Kendo UI Support for Vueの4つのコントロールを最新に提供しています.Kendo UI for jQueryは、現代のWebアプリケーションを作成する最も完全なUIライブラリです.
列をロック(フリーズ)すると、ユーザーがグリッドを水平にスクロールするときに常に特定の列を表示できます.
実行可能な例については、Gridでロックされたカラムを実装する方法の説明を参照してください.
<link rel="stylesheet" href="styles/kendo.common.min.css"/>
<link rel="stylesheet" href="styles/kendo.default.min.css"/>
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css"/>
<script src="js/jquery.min.js"/>
<script src="js/kendo.all.min.js"/>
<div id="example">
<div id="grid"/>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30
},
height: 540,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
},{
field: "ShipName",
title: "Ship Name",
locked: true,
width: 300
}, {
field: "ShipAddress",
lockable: false,
width: 400
}
]
});
});
</script>
</div>
</code></pre>
<p> </p>
<p> ， 。 ， 。 ， 。</p>
<ul>
<li> 。</li>
<li> 。</li>
<li> 。</li>
<li> ， 。</li>
<li> 。</li>
<li> 。</li>
</ul>
<p><strong> ：</strong></p>
<ul>
<li>Grid JavaScript API 。 ， ， 。 ， HTML ， 。</li>
<li> ， 。</li>
<li> ， ， 。</li>
</ul>
<p> ， ： 。 ， mousewheel 。 ， 。</p>
<p> ， （ Internet Explorer 9 Firefox） 。 ， ， 。</p>
<p> </p>
<pre><code>div.k-grid td
{
line-height: 18px;
}</code></pre>
<p> </p>
<p> Grid ，Grid 。 .k-grid-content-locked ， .k-grid-content 。</p>
<hr/>
<p><strong> Kendo UI ， Telerik ！</strong></p>
</div>
</div>
</div>
</div>