jQuery-Based BCGrid Table Plugin

Add-ons

2026-07-26 04:04 1 次浏览 • 0 次下载 1.2KB

Plugin Description: A JQuery-based BCGrid table plugin integrated with Bootstrap styles. Flexible and convenient, with a focus on backend developer friendliness!

Last Updated: 2019/8/22 9:41:45 PM

Changelog:Released the latest stable version v1.2.2.

1. Added the getSelectedRows method.

2. Added the serial number column type "serial".

3. Fixed several bugs discovered during implementation in real-world projects.

Last Updated: 2019-06-19 09:36:10

Changelog:

1. Added row merging support (rowspan).

2. Added variable column width support (based on colResizable).

3. Fixed several bugs.

Last Updated: 2019-05-07 09:36:39

Changelog:This is the latest stable version. Fixed several bugs, added some settings, and introduced new features.

Last Updated: 2018/12/17 2:41:27 PM

Changelog:Added row details support (currently incompatible with Tree mode). Added double-click event support. Added PHP/C#/Java demos. Adjusted the tree grid (currently incompatible with row details). Added row detail expand/collapse events. Added editing support for text boxes, dropdowns, and switches. Added other demos and more.

Last Updated: 2018/8/22 3:44:22 PM

Changelog:Fixed several bugs in Tree mode.

BCGrid

jQuery Grid Plugin. Flexible and convenient!

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

Options:

id: '',
    width: '', // Width value
    height: '', // Width value
    enabledCsrf: false,
    csrfName: '_csrf',
    lang: 'en',
    csrf: '',
    url: '', //ajax url
    data: {}, // Initial data
    localData: [],
    autoLoadData: true,
    showLoading: true, // Whether to display the loading status indicator
    loadingTip: 'Loading',// Loading message
    loadingStyle: 3,// Loading style
    enablePager: true, // Whether to enable pagination
    page: 1, // Default current page
    pageSize: 40, // Default number of results per page; all means all results
    pageSizeOptions: [10, 20, 30, 40, 50, 100], // Configurable number of results per page; supports all
    pagerOption: {
    showFirst: true,
    showLast: true,
    showPrev: true, //
    showNext: true, //
    showWhenever: true, // Whether to display pagination permanently
    showPageSizeOpt: true,
    firstText: 'First', // First page
    lastText: 'Last', // Last page
    prevText: 'Previous', // Previous page
    nextText: 'Next', // Next page
    ellipseText: "...",
    pageInfoTpl:'Page {currentPage} of {pageCount},{pageSize} records per page,total {recordCount} records'
    },
    sortName: "", // Sort column field
    sortOrder: "", // Sort direction
    params: [], // Parameters submitted to the server
    columns: [], // Data source
    dataSource: 'server', // Data source: local or server. Local reads p.data and requires no additional configuration. The source is determined by whether data or url is configured.
    showCheckbox: false, // Whether to display checkboxes
    showSerialNum: true, // Whether to display row numbers
    showBorder: true, // Whether to display borders
    showStripe: true,// Whether to display alternating row stripes
    showHover: true,// Whether to enable hover effects
    showHead: true,
    showTitle: false,
    title: "",
    noDataText: '<div class="center">No records available</div>',
    dateFormat: 'yyyy-MM-dd hh:mm:ss', // Default date display format
    wrapCssClass: '', // Class name
    cssClass: 'bc-table', // Class name
    rows: 'rows', // Data source field name
    total: 'total', // Data source record count field name
    pageParamName: 'page', // Page index parameter name (submitted to the server)
    pageSizeParamName: 'pagesize', // Page record count parameter name (submitted to the server)
    sortNameParamName: 'sortname', // Page sort column name (submitted to the server)
    sortOrderParamName: 'sortorder', // Page sort direction (submitted to the server)
    pagerElement: null, // Pagination container
    enableSelectRow: true, // Whether rows can be selected
    enableMultiSelectRow: false,// Whether multiple row selection is allowed
    onCheckClick: null, // Selection event (checkbox)
    onCheckAllClick: null, // Selection click data (select all/deselect all)
    onError: null, // Error event
    onCompleted: null, // Callback function after loading
    onLoadData: null, // Event before loading data
    onLoadedData: null, // Event after data loading
    onSelectedRow: null, // Row selection event
    onRowClick: null, // Row selection event
    onTreeExpandOrCollapse: null,// Tree expand/collapse event
    tree: null