jQWidgets API 笔记

[javascript] view plain copy

1. $("#jqxgrid").jqxGrid({  
2.       theme: 'energyblue',  
3.       altrows: true,//行间底色区分  
4.       width: 500,  
5.       sortable: true,//设置可排序  
6.       pageable: true,//设置可分页  
7.       pagesize: 10,//设置默认页数  
8.       pagesizeoptions: ['10', '20', '30'],//设置分页数  
9.       columnsresize: true,//列可适应调整  
10.       clipboard: false,//屏蔽jqx的复制功能  
11.       enablebrowserselection: true,//允许使用浏览器选择内容功能  
12.       editable: true  
13.       source: dataAdapter,//数据源  
14.       columns: [{  
15.           text: 'First Name',  
16.           datafield: 'firstname',  
17.           width: 100  
18.       }]//列字段定义  
19.   });  

 

 

常用：

//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);
     }

http://jsfiddle.net/jqwidgets/vFJ35/

http://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;
});

http://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读取后，调用

 

[javascript] view plain copy

1. function bindData(name,da,field,col){  
2.                         $("#"+name).jqxGrid({  
3.                                 width : '100%',  
4.                                 height : '100%',  
5.                                 theme:theme,  
6.                                 showtoolbar: false,  
7.                                 source : {  
8.                                         localdata : da,  
9.                                         datatype : "array",  
10.                                         datafields : field  
11.                                 },  
12.                                 sortable: true,  
13.                                 pageable : false,  
14.                                 editable : true,  
15.                                 columns :col  
16.                         });  
17.                 }  

 

 

 

 

jqxGrid Demo:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/defaultfunctionality.htm

 

[html] view plain copy

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <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.   
5.     </title>  
6.     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />  
7.     <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>  
8.     <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>  
9.     <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>   
10.     <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>  
11.     <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>  
12.     <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>  
13.     <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>  
14.     <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>  
15.     <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>  
16.     <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>  
17.     <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>   
18.     <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>   
19.     <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>   
20.     <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>   
21.     <script type="text/javascript" src="../../scripts/demos.js"></script>  
22.     <script type="text/javascript">  
23.         $(document).ready(function () {  
24.             var url = "../sampledata/products.xml";//数据url  
25.             // prepare the data  
26.             var source =  
27.             {  
28.                 datatype: "xml",  
29.                 datafields: [  
30.                     { name: 'ProductName', type: 'string' },  
31.                     { name: 'QuantityPerUnit', type: 'int' },  
32.                     { name: 'UnitPrice', type: 'float' },  
33.                     { name: 'UnitsInStock', type: 'float' },  
34.                     { name: 'Discontinued', type: 'bool' }  
35.                 ],//数据字段定义  
36.                 root: "Products",//节点根（可选）  
37.                 record: "Product",  
38.                 id: 'ProductID',  
39.                 url: url  
40.             };//格式化  
41. var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {  
42.                 if (value < 20) {  
43.                     return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';  
44.                 }  
45.                 else {  
46.                     return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';  
47.                 }  
48.             }  
49. //数据适配  
50.             var dataAdapter = new $.jqx.dataAdapter(source, {  
51.                 downloadComplete: function (data, status, xhr) { },  
52.                 loadComplete: function (data) { },  
53.                 loadError: function (xhr, status, error) { }  
54.             });  
55.             // initialize jqxGrid  
56.             $("#jqxgrid").jqxGrid(  
57.             {  
58.                 width: 850,  
59.                 source: dataAdapter,//数据源  
60.                 pageable: true,//是否分页  
61.                 autoheight: true,//是否自动高度  
62.                 sortable: true,//是否排序  
63.                 altrows: true,//是否行间颜色区分  
64.                 enabletooltips: true,//是否工具提示  
65.                 editable: true,//是否可编缉        
66.                 columnsresize: true,//列间距是否可调整  
67. selectionmode: 'multiplecellsadvanced',//选择模式  
68. enablebrowserselection: true,//数据可选  
69. clipboard: false,//屏蔽jqxGrid的复制功能  
70. columns: [   
71. {text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },   
72. { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },   
73. { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },   
74. { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },   
75. { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued'}   
76. ],   
77. columngroups: [   
78. { text: 'Product Details', align: 'center', name: 'ProductDetails' }   
79. ]//列数据绑定   
80. });//数据绑定完成后事件  
81. $("#jqxGrid").on("bindingcomplete", function (event) {// your code here.});}); </script>  
82. </head>  
83. <body class='default'>  
84. <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">  
85. <div id="jqxgrid"> </div>  
86. </div>  
87. </body>  
88. </html>  
89. <pre>