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

jqwidgets简单技术

梅飞龙
2023-12-01
var index = parseInt($("#rowindexinput").val());//取文本框的值
                var columnindex = $("#columnchooser").jqxDropDownList('getSelectedIndex');//选中的栏位位数

                var columndatafield = $("#jqxgrid").jqxGrid('getcolumnat', columnindex).datafield;//取栏位名


 if (!isNaN(index)) {//判断是不是整数
                    $("#jqxgrid").jqxGrid('selectcell', index, columndatafield); //选中指定栏位columndatafield,里的第index个。
                }


查询:

renderstatusbar: function (statusbar) {
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    
                    var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");
                    container.append(searchButton);
                    statusbar.append(container);
                    searchButton.jqxButton({  width: 50, height: 20 });
                    // 点击查询按钮
                    searchButton.click(function (event) {
                        var offset = $("#jqxgrid").offset();
                        $("#jqxwindow").jqxWindow('open');//弹出查询框
                        $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
                    });
                },


// 设置查询下拉框的属性.
            $("#dropdownlist").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23, 
                source: [
                    'First Name', 'Last Name', 'Product', 'Quantity', 'Price'
                ]
            });


            // find records that match a criteria.
            $("#findButton").click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');//清空
                var searchColumnIndex = $("#dropdownlist").jqxDropDownList('selectedIndex');
                var datafield = "";
                switch (searchColumnIndex) {
                    case 0:
                        datafield = "firstname";
                        break;
                    case 1:
                        datafield = "lastname";
                        break;
                    case 2:
                        datafield = "productname";
                        break;
                    case 3:
                        datafield = "quantity";
                        break;
                    case 4:
                        datafield = "price";
                        break;
                }


                var searchText = $("#inputField").val();//去input框的值
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = searchText;
                var filtercondition = 'contains';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter);
                $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            });


        <div id="jqxwindow">
            <div>
                Find Record</div>
            <div style="overflow: hidden;">
                <div>
                    Find what:</div>
                <div style='margin-top:5px;'>
                    <input id='inputField' type="text" class="jqx-input" style="width: 200px; height: 23px;" />
                </div>
                <div style="margin-top: 7px; clear: both;">
                    Look in:</div>
                <div style='margin-top:5px;'>
                    <div id='dropdownlist'>
                    </div>
                </div>
                <div>
                    <input type="button" style='margin-top: 15px; margin-left: 50px; float: left;' value="Find" id="findButton" />
                    <input type="button" style='margin-left: 5px; margin-top: 15px; float: left;' value="Clear" id="clearButton" />
                </div>
            </div>
        </div>

 类似资料: