【jQWidgets】API 笔记

http://www.jqwidgets.com/jquery-widgets-demo/

$("#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);
     }

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

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:

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

<!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>