$("#jqxgrid").jqxGrid({
theme: 'energyblue',
altrows: true,//行間底色區分
width: 500,
sortable: true,//設置可排序
pageable: true,//設置可分頁
pagesize: 10,//設置默認頁數
pagesizeoptions: ['10', '20', '30'],//設置分頁數
columnsresize: true,//列可適應調整
clipboard: false,//屏蔽jqx的復制功能
enablebrowserselection: true,//允許使用瀏覽器選擇內容功能
editable: true
source: dataAdapter,//數據源
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 100
}]//列字段定義
});
常用：
//jqxGrid的復制功能 Code example
$('#jqxGrid').jqxGrid({ clipboard: false});
var clipboard = $('#jqxGrid').jqxGrid('clipboard');
//允許選擇瀏覽器的文本內容Code example
$('#jqxGrid').jqxGrid({ enablebrowserselection: true});
var enablebrowserselection = $('#jqxGrid').jqxGrid('enablebrowserselection');
//設置列間距可調
$('#jqxGrid').jqxGrid({ columnsresize: false});
//獲取是否可調值
var columnsresize = $('#jqxGrid').jqxGrid('columnsresize');
//數據綁定完成后事件,放在grid之前
$("#jqxGrid").on("bindingcomplete", function (event) {// your code here.});
$("#jqxgrid").jqxGrid({});
////獲取整個數據行數
var rows = $('#jqxGrid').jqxGrid('getrows');
var data = $('#jqxGrid').jqxGrid('getrowdata', 0);
//設置某一行選中
$('#jqxGrid').jqxGrid('selectrow', 10);
//獲取選中行的index
var rowindex = $('#jqxGrid').jqxGrid('getselectedrowindex');
//獲取選中行其中一列的相關數據
var cell = $('#jqxgrid').jqxGrid('getselectedcell');
if (cell) {
alert("Row: " + cell.rowindex + ", Column: " + cell.datafield);
}
//jsfiddle.net/jqwidgets/vFJ35/
//jsfiddle.net/jqwidgets/kBNWp/
//數據綁定后函數
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
行雙擊事件
$('#jqxGrid').on('rowdoubleclick', function (event)
{
var args = event.args;
// row's bound index.
var boundIndex = args.rowindex;
// row's visible index.
var visibleIndex = args.visibleindex;
// right click.
var rightclick = args.rightclick;
// original event.
var ev = args.originalEvent;
});
//jsfiddle.net/jqwidgets/CgvvZ/
編輯觸發事件
$("#jqxgrid").on('cellbeginedit', function (event) {
var args = event.args;
$("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
$("#jqxgrid").on('cellendedit', function (event) {
var args = event.args;
$("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});
列驗證
columns:[
{text:'日期',dataField:'DT',width:'50%',validation:function(){
if(value==''){
return{message:'日期必須填寫',result:false};
}
return true;
}
}
]
編輯框
$('#editor').jqxEditor({
height: "400px",
width: '800px'theme: 'energyblue', theme: 'energyblue', tools: 'bold italic underline right link'//為空時無工具條
});
Ajax讀取后，調用
function bindData(name,da,field,col){
$("#"+name).jqxGrid({
width : '100%',
height : '100%',
theme:theme,
showtoolbar: false,
source : {
localdata : da,
datatype : "array",
datafields : field
},
sortable: true,
pageable : false,
editable : true,
columns :col
});
}
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
};//格式化
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,//是否可編緝
columnsresize: true,//列間距是否可調整
selectionmode: 'multiplecellsadvanced',//選擇模式
enablebrowserselection: true,//數據可選
clipboard: false,//屏蔽jqxGrid的復制功能
columns: [
{text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
{ text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
{ text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
{ text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
{ text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued'}
],
columngroups: [
{ text: 'Product Details', align: 'center', name: 'ProductDetails' }
]//列數據綁定
});//數據綁定完成后事件
$("#jqxGrid").on("bindingcomplete", function (event) {// your code here.});}); </script>
</head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"> </div>
</div>
</body>
</html>
</pre>
本文轉自：核心網絡
立即下載最新版：jQWidgets v4.1.2
想要了解更多詳情，。
標簽：
JavaScript HTML5jQueryUI界面
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
金喜正規買球 
25次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線