日韩欧美国产一区二区,日韩精品亚,国产精品日

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

【jQWidgets】API 筆記

轉(zhuǎn)帖|使用教程|編輯：黃竹雯|2016-06-27 11:25:16.000|閱讀 2093 次

概述：【jQWidgets】API 筆記

$("#jqxgrid").jqxGrid({  
      theme: 'energyblue',  
      altrows: true,//行間底色區(qū)分  
      width: 500,  
      sortable: true,//設(shè)置可排序  
      pageable: true,//設(shè)置可分頁  
      pagesize: 10,//設(shè)置默認(rèn)頁數(shù)  
      pagesizeoptions: ['10', '20', '30'],//設(shè)置分頁數(shù)  
      columnsresize: true,//列可適應(yīng)調(diào)整  
      clipboard: false,//屏蔽jqx的復(fù)制功能  
      enablebrowserselection: true,//允許使用瀏覽器選擇內(nèi)容功能  
      editable: true  
      source: dataAdapter,//數(shù)據(jù)源  
      columns: [{  
          text: 'First Name',  
          datafield: 'firstname',  
          width: 100  
      }]//列字段定義  
  });

常用：

//jqxGrid的復(fù)制功能 Code example
$('#jqxGrid').jqxGrid({ clipboard: false});
var clipboard = $('#jqxGrid').jqxGrid('clipboard');

//允許選擇瀏覽器的文本內(nèi)容Code example
$('#jqxGrid').jqxGrid({ enablebrowserselection: true});
var enablebrowserselection = $('#jqxGrid').jqxGrid('enablebrowserselection');

//設(shè)置列間距可調(diào)
$('#jqxGrid').jqxGrid({ columnsresize: false});

//獲取是否可調(diào)值
var columnsresize = $('#jqxGrid').jqxGrid('columnsresize');

//數(shù)據(jù)綁定完成后事件,放在grid之前
$("#jqxGrid").on("bindingcomplete", function (event) {// your code here.});
$("#jqxgrid").jqxGrid({});

////獲取整個數(shù)據(jù)行數(shù)
var rows = $('#jqxGrid').jqxGrid('getrows');
var data = $('#jqxGrid').jqxGrid('getrowdata', 0);

//設(shè)置某一行選中

$('#jqxGrid').jqxGrid('selectrow', 10);

//獲取選中行的index

var rowindex = $('#jqxGrid').jqxGrid('getselectedrowindex');

//獲取選中行其中一列的相關(guān)數(shù)據(jù)

var cell = $('#jqxgrid').jqxGrid('getselectedcell');
if (cell) {
alert("Row: " + cell.rowindex + ", Column: " + cell.datafield);
}

//jsfiddle.net/jqwidgets/vFJ35/

//jsfiddle.net/jqwidgets/kBNWp/

//數(shù)據(jù)綁定后函數(shù)

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/

編輯觸發(fā)事件
$("#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讀取后，調(diào)用


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";//數(shù)據(jù)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' }  
                ],//數(shù)據(jù)字段定義  
                root: "Products",//節(jié)點根（可選）  
                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>';  
                }  
            }  
//數(shù)據(jù)適配  
            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,//數(shù)據(jù)源  
                pageable: true,//是否分頁  
                autoheight: true,//是否自動高度  
                sortable: true,//是否排序  
                altrows: true,//是否行間顏色區(qū)分  
                enabletooltips: true,//是否工具提示  
                editable: true,//是否可編緝        
                columnsresize: true,//列間距是否可調(diào)整  
selectionmode: 'multiplecellsadvanced',//選擇模式  
enablebrowserselection: true,//數(shù)據(jù)可選  
clipboard: false,//屏蔽jqxGrid的復(fù)制功能  
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' }   
]//列數(shù)據(jù)綁定   
});//數(shù)據(jù)綁定完成后事件  
$("#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>

本文轉(zhuǎn)自：核心網(wǎng)絡(luò)

立即下載最新版：jQWidgets v4.1.2

想要了解更多詳情，。

標(biāo)簽：JavaScript HTML5 jQuery UI界面

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：jQuery EasyUI使用教程：樹的拖放控制下一篇：K2 Blackpearl軟硬件配置推薦