Question

我正在制作一个webApp，在一个屏幕上有两个表，第一个表示我存储在DB上的类别，第二个表示属于这些类别的元素。两者都是BootstrapTable。我尝试做的是，当用户点击第一个表的一行时，该类别的项目将加载到第二个表格中，我设法这样做，但它只运行一次。如果我点击第一个表然后第二个填充，但如果我再次点击第一个表的任何其他元素没有任何反应。我甚至使用console.log来查看事件是否有效，在表格之前和之后，＃34;重新加载＆＃34;。

function getProductos(Categoria) {
    var id_cat=Categoria||iSeldCat;
    $('div#tableProds').bootstrapTable({
        url: '../../../controllers/classproductos?getProductos=-&categoria='+id_cat,
        cache: false,
        condensed: true,
        striped: true,
        search: true,
        language: 'spanish',
        showColumns: false,
        showRefresh: false,
        columns: [
            {
                field: 'codigo',
                title: 'C&oacute;digo',
                width: '15%'
            },{
                field: 'rutaImg',
                title: 'Imagen',
                formatter: utils().imagenProductoCRUD,
                width: '130px'
            }, {
                field: 'descripcion',
                title: 'Nombre',
                width: '35%'
            }, {
                field: 'precioventa',
                title: 'Precio Venta',
                formatter: utils().formatPriceTable,
                width: '10%'
            }, {
                field: '',
                title: 'Acciones',
                formatter: utils().buttonCRUD,
                align: 'center',
                width: '10%'
            }
        ]
    });
    console.log(id_cat + " Print");
}

在运行该代码时，我会进入我的控制台1 Print，3 Print和儿子，但该表并没有做任何事情。

这是第一个表，包括我之前说过的事件，每次都有效：

function getCategorias(){
    $('div#categoriastab').bootstrapTable({
        method: 'post',
        url: '../../../controllers/classcategorias?getCategorias=-',
        dataType: 'json',
        cache: false,
        condensed: true,
        striped: true,
        search: true,
        showColumns: false,
        showRefresh: false,
        idField: 'id_categoria',
        columns: [{
            field:'id_categoria',
            title: 'ID'
        },{
            field: 'imagencat',
            title: 'Imagen',
            formatter: utils().imagenCRUD,
            align: "left",
            width: "15%"
        },{
            field: 'nombre',
            title: 'Categor&iacute;a',
            align: "left",
            width: "65%"
        }, {field: '',
            title: 'Acciones',
            formatter: utils().buttonCRUD,
            align: 'center',
            width: "20%;"
            }
        ]
    }).on('click-row.bs.table', function (e, row, $element) {
        iSeldCat=row.id_categoria;
        getProductos(iSeldCat);
    });
}

知道它可能是什么吗？

Answer 1

应该避免再次使用bootstrapping表的这种方法。按以下方式处理。

准备好文件

$(document.ready(function() {
    $('div#categoriastab').bootstrapTable({
        method: 'post',
        url: '../../../controllers/classcategorias?getCategorias=-',
        dataType: 'json',
        cache: false,
        condensed: true,
        striped: true,
        search: true,
        showColumns: false,
        showRefresh: false,
        idField: 'id_categoria',
        columns: [{
            field:'id_categoria',
            title: 'ID'
        },{
            field: 'imagencat',
            title: 'Imagen',
            formatter: utils().imagenCRUD,
            align: "left",
            width: "15%"
        },{
            field: 'nombre',
            title: 'Categor&iacute;a',
            align: "left",
            width: "65%"
        }, {field: '',
            title: 'Acciones',
            formatter: utils().buttonCRUD,
            align: 'center',
            width: "20%;"
            }
        ]
    }).on('click-row.bs.table', function (e, row, $element) {
        iSeldCat=row.id_categoria;
        getProductos(iSeldCat);
    });

    $('div#tableProds').bootstrapTable({
        data: [],
        cache: false,
        condensed: true,
        striped: true,
        search: true,
        language: 'spanish',
        showColumns: false,
        showRefresh: false,
        columns: [
            {
                field: 'codigo',
                title: 'C&oacute;digo',
                width: '15%'
            },{
                field: 'rutaImg',
                title: 'Imagen',
                formatter: utils().imagenProductoCRUD,
                width: '130px'
            }, {
                field: 'descripcion',
                title: 'Nombre',
                width: '35%'
            }, {
                field: 'precioventa',
                title: 'Precio Venta',
                formatter: utils().formatPriceTable,
                width: '10%'
            }, {
                field: '',
                title: 'Acciones',
                formatter: utils().buttonCRUD,
                align: 'center',
                width: '10%'
            }
        ]
    });
}

选择项目

function getProductos(iSeldCat) {
    $('div#tableProds').bootstrapTable('refresh', {url: "../../../controllers/classproductos?getProductos=-&categoria=" + iSeldCat});
}

我还没有测试过这段代码的功能。但这应该是方法。您可以参考Bootstrap Table documentation查看属性和方法调用详情。

为什么BootstrapTable只能工作一次？

1 个答案:

准备好文件

选择项目