LigerUi的Grid参数及事件简单整理

$.ligerDefaults.Grid = {
        title: null,
        width: 'auto',                          //宽度值
        height: 'auto',                          //宽度值
        columnWidth: null,                      //默认列宽度
        resizable: true,                        //table是否可伸缩
        url: false,                             //ajax url
        urlParms: null,                     //url带参数
        data: null,                            //初始化数据
        usePager: true,                         //是否分页
        hideLoadButton : false,                 //是否隐藏刷新按钮
        pagerRender : null,                     //分页栏自定义渲染函数
        page: 1,                                //默认当前页 
        pageSize: 10,                           //每页默认的结果数
        pageSizeOptions: [10, 20, 30, 40, 50],  //可选择设定的每页结果数
        parms: [],                         //提交到服务器的参数 
        columns: [],                          //数据源
        minColToggle: 1,                        //最小显示的列
        dataType: 'server',                     //数据源:本地(local)或(server),本地是将读取p.data。不需要配置,取决于设置了data或是url
        dataAction: 'server',                    //提交数据的方式:本地(local)或(server),选择本地方式时将在客服端分页、排序。 
        showTableToggleBtn: false,              //是否显示'显示隐藏Grid'按钮 
        switchPageSizeApplyComboBox: false,     //切换每页记录数是否应用ligerComboBox
        allowAdjustColWidth: true,              //是否允许调整列宽     
        checkbox: false,                         //是否显示复选框
        isSingleCheck: false,                  //复选框选择的时候是否单选模式
        allowHideColumn: true,                 //是否显示'切换列层'按钮
        enabledEdit: false,                      //是否允许编辑
        isScroll: true,                         //是否滚动 
        dateFormat: 'yyyy-MM-dd',              //默认时间显示格式
        inWindow: true,                        //是否以窗口的高度为准 height设置为百分比时可用
        statusName: '__status',                    //状态名
        method: 'post',                         //获取数据http方式
        async: true,
        fixedCellHeight: true,                       //是否固定单元格的高度
        heightDiff: 0,                         //高度补差,当设置height:100%时,可能会有高度的误差,可以通过这个属性调整
        cssClass: null,                    //类名
        root: 'Rows',                       //数据源字段名
        record: 'Total',                     //数据源记录数字段名
        pageParmName: 'page',               //页索引参数名,(提交给服务器)
        pagesizeParmName: 'pagesize',        //页记录数参数名,(提交给服务器)
        sortnameParmName: 'sortname',        //页排序列名(提交给服务器)
        sortorderParmName: 'sortorder',      //页排序方向(提交给服务器) 
        allowUnSelectRow: false,           //是否允许反选行 
        alternatingRow: true,           //奇偶行效果
        mouseoverRowCssClass: 'l-grid-row-over',
        enabledSort: true,                      //是否允许排序
        rowClsRender: null,                   //行自定义css class渲染器
        rowAttrRender: null,                  //行自定义属性渲染器(包括style,也可以定义)
        groupColumnName: null,                 //分组 - 列名
        groupColumnDisplay: '分组',             //分组 - 列显示名字
        groupRender: null,                     //分组 - 渲染器
        totalRender: null,                       //统计行(全部数据)
        delayLoad: false,                        //初始化时是否不加载
        where: null,                           //数据过滤查询函数,(参数一 data item,参数二 data item index)
        selectRowButtonOnly: false,            //复选框模式时,是否只允许点击复选框才能选择行 
        selectable: true,
        whenRClickToSelect: false,                //右击行时是否选中
        contentType: null,                     //Ajax contentType参数
        checkboxColWidth: 27,                  //复选框列宽度
        detailColWidth: 29,                     //明细列宽度
        clickToEdit: true,                      //是否点击单元格的时候就编辑
        detailToEdit: false,                     //是否点击明细的时候进入编辑
        onEndEdit: null,
        minColumnWidth: 80,
        tree: null,                            //treeGrid模式
        isChecked: null,                       //复选框 初始化函数
        isSelected: null,                       //选择 初始化函数
        frozen: true,                          //是否固定列
        frozenDetail: false,                    //明细按钮是否在固定列中
        frozenCheckbox: true,                  //复选框按钮是否在固定列中
        detail: null,
        detailHeight: 260,
        isShowDetailToggle: null,                  //是否显示展开/收缩明细的判断函数
        rownumbers: false,                         //是否显示行序号
        frozenRownumbers: true,                  //行序号是否在固定列中
        rownumbersColWidth: 26,
        colDraggable: false,                       //是否允许表头拖拽
        rowDraggable: false,                         //是否允许行拖拽
        rowDraggingRender: null,
        autoCheckChildren: true,                  //是否自动选中子节点
        onRowDragDrop: null,                    //行拖拽事件
        rowHeight: 28,                           //行默认的高度
        headerRowHeight: 28,                    //表头行的高度
        toolbar: null,                           //工具条,参数同 ligerToolbar的,额外参数有title、icon
        toolbarShowInLeft: true,               //工具条显示在左边
        headerImg: null,                        //表格头部图标  
        editorTopDiff: 3,                      //编辑器top误差
        editorLeftDiff: 1,                //编辑器left误差
        editorHeightDiff: -1,               //编辑器高度误差
        unSetValidateAttr: true,             //是否不设置validate属性到inuput
        autoFilter: false,                    //自动生成高级查询, 需要filter/toolbar组件支持. 需要引用skins/ligerui-icons.css
        rowSelectable: true,               //是否允许选择
        scrollToPage: false,               //滚动时分页
        scrollToAppend: true,             //滚动时分页 是否追加分页的形式
        onDragCol: null,                       //拖动列事件
        onToggleCol: null,                     //切换列事件
        onChangeSort: null,                    //改变排序事件
        onSuccess: null,                       //成功获取服务器数据的事件
        onDblClickRow: null,                     //双击行事件
        onSelectRow: null,                    //选择行事件
        onBeforeSelectRow:null,             //选择前事件
        onUnSelectRow: null,                   //取消选择行事件
        onBeforeCheckRow: null,                 //选择前事件,可以通过return false阻止操作(复选框)
        onCheckRow: null,                    //选择事件(复选框)  
        onBeforeCheckAllRow: null,              //选择前事件,可以通过return false阻止操作(复选框 全选/全不选)
        onCheckAllRow: null,                    //选择事件(复选框 全选/全不选)onextend
        onBeforeShowData: null,                  //显示数据前事件,可以通过reutrn false阻止操作
        onAfterShowData: null,                 //显示完数据事件
        onError: null,                         //错误事件
        onSubmit: null,                         //提交前事件
        onReload: null,                    //刷新事件,可以通过return false来阻止操作
        onToFirst: null,                     //第一页,可以通过return false来阻止操作
        onToPrev: null,                      //上一页,可以通过return false来阻止操作
        onToNext: null,                      //下一页,可以通过return false来阻止操作
        onToLast: null,                      //最后一页,可以通过return false来阻止操作
        onAfterAddRow: null,                     //增加行后事件
        onBeforeEdit: null,                      //编辑前事件
        onBeforeSubmitEdit: null,               //验证编辑器结果是否通过
        onAfterEdit: null,                       //结束编辑后事件
        onLoading: null,                        //加载时函数
        onLoaded: null,                          //加载完函数
        onContextmenu: null,                   //右击事件
        onBeforeCancelEdit: null,                 //取消编辑前事件
        onAfterSubmitEdit: null,                   //提交后事件
        onRowDragDrop: null,                       //行拖拽后事件
        onGroupExtend: null,                        //分组展开事件
        onGroupCollapse: null,                     //分组收缩事件
        onTreeExpand: null,                        //树展开事件
        onTreeCollapse: null,                     //树收缩事件
        onTreeExpanded: null,                        //树展开事件
        onTreeCollapsed: null,                     //树收缩事件
        onLoadData: null,                       //加载数据前事件 
        onHeaderCellBulid: null
首先需要在Vue项目中引入LigerUI的相关文件,可以通过CDN或下载LigerUI的文件进行引入。然后在Vue组件中定义一个grid组件,并在该组件中引入LigerUI的相关代码。 在Vue组件中的template中,可以使用LigerUI提供的grid标签来创建grid组件,例如: ``` <liger-grid :columns="columns" :data="data"></liger-grid> ``` 其中,columns是定义grid的列信息,data是要展示的数据信息。 在Vue组件中的script中,需要定义columns和data两个变量,例如: ``` <script> export default { name: 'MyGrid', data () { return { columns: [ { display: 'ID', name: 'id', width: 80, align: 'center' }, { display: 'Name', name: 'name', width: 120, align: 'left' }, { display: 'Email', name: 'email', width: 200, align: 'left' }, { display: 'Address', name: 'address', width: 200, align: 'left' } ], data: [ { id: 1, name: 'John', email: 'john@example.com', address: 'New York' }, { id: 2, name: 'Jane', email: 'jane@example.com', address: 'London' }, { id: 3, name: 'Bob', email: 'bob@example.com', address: 'Paris' } ] } } } </script> ``` 以上是一个简单的示例,其中columns定义了grid的列信息,包括列名、列字段名、列宽度和对齐方式等,data定义了要展示的数据信息。 需要注意的是,LigerUIgrid组件需要在mounted生命周期中进行初始化,例如: ``` mounted () { this.$nextTick(() => { $(this.$el).ligerGrid({ columns: this.columns, data: this.data }) }) } ``` 以上代码中,使用jQuery选择当前组件的元素,然后调用ligerGrid方法进行初始化,传入columns和data参数。 最后,需要在组件销毁时销毁grid组件,例如: ``` beforeDestroy () { $(this.$el).ligerDestroy() } ``` 以上是用Vue实现LigerUIgrid组件的基本步骤,可以根据实际需求进行调整和扩展。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值