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

jqxgrid api中文 ——笔记

姜华翰
2023-12-01

$("#jqxgrid1").jqxGrid({
                //隔行换色
                altrows: true,
                localization: getLocalization('zh'),
                theme: 'bootstrap',
                width: '99%',
                height: tablePageHeight,
                //设置全局可编辑
                editable: true,
                //是否启用工具栏    
                showtoolbar: true,
                filterable: true,
                filtermode: 'default',
                //屏蔽jqx复制功能【暂时没测出有什么用】
                clipboard:false,
                //允许使用浏览器的选择内容功能
                enablebrowserselection:true,
                //设置可排序
                sortable: true,

                selectionmode: 'checkbox',

                //分页样式

                pagermode:  'simple' / 'default'

                //设置可分页
                pageable: true,
                //设置默认分页(不写默认为:10)

                pagesize:10,

                //设置分页数              

                pagesizeoptions: ['10', '20', '30'],

                //加载数据源
                source: dataAdapter1,
                //设置列间距可调
                columnsresize: true,
                autoshowfiltericon: true,
                ready: function () {
                    var localizationobj = filterlocalization();
                    $("#jqxgrid1").jqxGrid('localizestrings', localizationobj);
                },
                //列字段定义
                columns: [
                    {
                        text: '序号',
                        dataField: 'id',
                        width: '3%',
                        cellsalign: 'left',
                        align: 'center'
                    }
                ],
                showheader: true,
                toolbarheight: 40,
                rendertoolbar: function (toolbar) {
                    var container = $("<div id='gridToolBar' style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    //按钮——“新建”
                    var addButton = $("<div id='addButton' style='float: left; margin-left: 5px;'  ><span class='iconfont'>&#xe63a;</span><span style='margin-left: 4px; position: relative; top: -1px;'>新增</span></div>");

                    //添加按钮
                    container.append(addButton);

                    toolbar.append(container);

                    //给按钮设置属性
                    addButton.jqxButton({
                        width: 65,
                        height: 20,
                        template: "primary",
                        disabled: false
                    });
                  
                    //给"新建"按钮绑定事件
                    addButton.click(function () {
                        //更改按钮颜色
                        ChangeMenuItemSelectStatus(this, "gridToolBar");
                        //一系列操作
                    });              

                }
 

            });

 

 

 

 

额外:

//设置某一行选中

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

//清楚所有选中行

$("#jqxgrid").jqxGrid('clearselection');

 

//行双击事件

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

 

 类似资料: