龙行博客

走路看风景,经历看人生,岁月留痕迹,人生留轨迹,17的历史,18的豪情,时间的匆忙,人生的风景,放开心胸往前走,成功再远行,放开理想往前走,梦想再行动。
现在位置:首页 > 编程语言 > web前端 > 一个基于jQuery的table插件bcgrid

一个基于jQuery的table插件bcgrid

龙行    web前端    2019-7-23    268    0评论    本文已被百度收录点击查看详情

github地址: https://github.com/BigQ517/bcgrid

<link rel="stylesheet" href="../dist/css/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="../dist/css/bc.grid.min.css"/>
<script src="../lib/jquery-11.1.min.js"></script>
<script src="../dist/bc.grid.min.js"></script>
How to use:
 var grid=BCGrid.create("#table",{
            columns: [
                {id: 'id', name: 'id', display: 'ID', align: 'center', hide: true},
                {id: 'name', name: 'name', display: 'Name'},
                {
                    name: 'gender', display: 'Gender', render: function (item, index) {                    if (item.gender == 1) {                        return "Boy";
                    }                    if (item.gender == 2) {                        return "Girl";
                    }
                }
                },
                {name: 'age', display: 'Age', format: '{value}Years', enableSort: true},
                {name: 'email', display: 'Email', enableSort: true},
                {name: 'mobile', display: 'Mobile'},
                {name: 'sign', display: 'Sign',maxLength:10},
                {name: 'time', display: 'Time',type:'dateTime',format:'MM/dd yyyy hh:mm:ss'}
            ],
            title:'BC Grid',
            showTitle:true,
            showCheckbox: true,
            showSerialNum: true,
            url: 'handler/data.php'
        });
    id: '',
    width: '', //宽度值
    height: '', //宽度值
    enableCsrf: false,
    csrfName: '_csrf',
    lang: 'en',
    csrf: '',
    url: '', //ajax url
    localData: [],
    autoLoadData: true,
    showLoading: true, //是否显示加载状态提示
    loadingTip: 'Loading',//加载提示信息
    loadingStyle: 3,//加载样式
    enablePager: true, //是否分页
    page: 1, //默认当前页
    pageSize: 40, //每页默认的结果数 all全部
    pageSizeOptions: [10, 20, 30, 40, 50, 100], //可选择设定的每页结果数 支持 all
    pagerOption: {
    showFirst: true,//显示首页
    showLast: true,
    showPrev: true, //
    showNext: true, //
    showWhenever: true, //是否永久显示分页
    showPageSizeOpt: true,
    firstText: 'First', //首页
    lastText: 'Last', //末页
    prevText: 'Previous', //上一页
    nextText: 'Next', //下一页
    ellipseText: "...",
    pageInfoTpl:'Page {currentPage} of {pageCount},{pageSize} records per page,total {recordCount} records'
    },
    sortName: "", //排序列字段
    sortOrder: "", //排序方向
    params: [], //提交到服务器的参数
    columns: [], //数据源
    dataSource: 'server', //数据源:本地(local)或(server),推荐使用默认值(server)
    ajaxType:'post', //ajax数据提交方式 get/post
    showCheckbox: false, //是否显示复选框
    showSerialNum: true, //是否显示序号
    showBorder: true, //是否显示边框
    showStripe: true,//是否显示条纹间隔效果
    showHover: true,//是否显示hover效果
    showHeadColor: true,//是否表头显示背景色
    showHead: true,
    showTitle: false,//显示标题 true/false  与colResize互斥  showTitle优先
    serialNumWidth:null,//序号列宽
    title: "",//标题文字
    showFoot: false,//显示foot true/false
    foot: "",//foot 内容
    footAlign: null,//foot内容对齐方向 null/left/right/center
    titleAlign: null,//标题对齐方向
    noDataText: '<div class="center">暂无任何记录</div>',//没有数据的提示内容
    dateFormat: 'yyyy-MM-dd hh:mm:ss', //默认时间显示格式
    wrapCssClass: '', //类名
    cssClass: 'bc-table', //类名
    rows: 'rows', //数据源字段名
    total: 'total', //数据源记录数字段名
    pageParamName: 'page', //页索引参数名,(提交给服务器)
    pageSizeParamName: 'pagesize', //页记录数参数名,(提交给服务器)
    sortNameParamName: 'sortname', //页排序列名(提交给服务器)
    sortOrderParamName: 'sortorder', //页排序方向(提交给服务器)
    pagerElement: null, //分页容器
    enableSelectRow: true, //是否可选择行
    enableMultiSelectRow: false,//是否允许行多选
    onCheckClick: null, //选择事件(复选框)
    onCheckAllClick: null, //选择点击数据(全选/全不选)
    onError: null, //错误事件
    onCompleted: null, //加载完函数
    onLoadData: null, //加载数据前事件
    onLoadedData: null, //加载完数据事件
    onSelectedRow: null, //选择行事件
    onRowClick: null, //单击行事件
    onRowDbClick: null, //双击行事件
    rowStyle:null,//行样式string / function(rowIndex,rowData){return string/object;}
    onRowDetailExpandOrCollapse:null,//行明细 展开/收缩事件
    onTreeExpandOrCollapse: null,//树展开/收缩事件
    rowDetail: null,//明细 与tree和rowSpanKeys互斥 rowDetail优先,其次tree
    tree: null,//tree设置 与rowDetail和rowSpanKeys互斥 rowDetail优先,其次tree
    rowSpanKeys: null//合并行key['key1','key2'] 与rowDetail和tree互斥 rowDetail优先,其次tree
    colResize:{
           liveDrag: true,
           minWidth: 20,
     } // jsonObject or null/false 列宽可变与showTitle互斥  showTitle优先

ColumnOptions:

   var defaultOpt = {
            display: '',//标题显示
            id: '',//id
            name: 'name',//数据name
            type: 'text',//数据类型
            render: null,//执行行数
            hide: false,//是否隐藏
            width: null,//列宽
            align: null,//文本水平对齐方式
            vAlign:null,//文本垂直对齐方式
            headAlign: null,//标题对齐方式
            maxLength: null,//显示的最大长度
            format: null,//显示数据格式(date)
            enableSort: false,//是否可以排序
            allowNewline: false,//是否允许自动换行
            elOpt: null//可编辑控制参数
         };

TreeOptions:

     var defaultOpt = {
             displayID: '',
             key: 'id',
             parentKey: 'parentid',
             expand: false
          };

RowDetailOption:

   var defaultOpt = {              content: function (rowIndex, rowData) {                       return "";
               },//明细内容string / function(rowIndex,rowData){return string/false;}
               ctrlStyle: 'db',//控制图标样式 db/sg/pm
               align: null, // null/center/left/right
               expand: false
  };


评论一下 分享本文 赞助站长

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/272.html
  • 上篇文章:workerman安装踩坑日记
  • 下篇文章:TP5+layui excel导入
  • jquery
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航
联系博主
在线壁纸
给我留言
光羽影视
音乐欣赏
返回顶部