标签：jqwidgets
http://www.jqwidgets.com/jquery-widgets-demo/
常用：
//设置列间距可调
$(‘#jqxGrid‘).jqxGrid({ columnsresize: false});//获取是否可调值
var columnsresize = $(‘#jqxGrid‘).jqxGrid(‘columnsresize‘);
//数据绑定完成后事件
$("#jqxGrid").on("bindingcomplete", function (event) {// your code here.});
jqxGrid Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.
</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = "../sampledata/products.xml";//数据url
// prepare the data
var source =
{
datatype: "xml",
datafields: [
{ name: 'ProductName', type: 'string' },
{ name: 'QuantityPerUnit', type: 'int' },
{ name: 'UnitPrice', type: 'float' },
{ name: 'UnitsInStock', type: 'float' },
{ name: 'Discontinued', type: 'bool' }
],//数据字段定义
root: "Products",//节点根（可选）
record: "Product",
id: 'ProductID',
url: url
};//格式化
<span style="white-space:pre"> </span> var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (value < 20) {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
}
else {
return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
}
}
//数据适配
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,//数据源
pageable: true,//是否分页
autoheight: true,//是否自动高度
sortable: true,//是否排序
altrows: true,//是否行间颜色区分
enabletooltips: true,//是否工具提示
editable: true,//是否可编缉
<span style="white-space:pre"> </span>columnsresize: true,//列间距是否可调整
<span style="white-space:pre"> </span>selectionmode: 'multiplecellsadvanced',//选择模式
<span style="white-space:pre"> </span>columns: [
<span style="white-space:pre"> </span>{text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
<span style="white-space:pre"> </span>{ text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
<span style="white-space:pre"> </span>{ text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
<span style="white-space:pre"> </span>{ text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
<span style="white-space:pre"> </span>{ text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued'}
<span style="white-space:pre"> </span>],
<span style="white-space:pre"> </span>columngroups: [ { text: 'Product Details', align: 'center', name: 'ProductDetails' } ]//列数据绑定
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>//数据绑定完成后事件
$("#jqxGrid").on("bindingcomplete", function (event) {// your code here.});
});
</script>
</head>
<body class='default'>
<span style="white-space:pre"> </span><div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<span style="white-space:pre"> </span><div id="jqxgrid"> </div>
<span style="white-space:pre"> </span></div>
</body>
</html>标签：jqwidgets
原文地址：http://blog.csdn.net/nickroprak/article/details/41673639
