当前位置: 首页 > 工具软件 > jQWidgets > 使用案例 >

jQWidgets API 笔记

华萧迟
2023-12-01

[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>  
 类似资料: