首页 > 解决方案 > 显示带有复选框和标签的列网格,以便复选框可单击并可发送到 PHP

问题描述

我想在一个网格中显示复选框和数据标签,以便标签是只读的并且复选框是可点击的,并且它们的结果可以发送到 PHP 后端。此窗口的目的是将订单中的一些文章与图片标签相关联。

EXT JS with Ext.grid.ColumnModel: 
setCM : function(){
        var checkColumn = new Ext.grid.CheckColumn({
               header: 'Choix',
               dataIndex: 'NOM_LOGO',
               align : 'center',
               width: 50
            });

        // add the column to the column model
        this.cm = new Ext.grid.ColumnModel([
               checkColumn,
               {
                   header: 'Nom Logo',
                   dataIndex: 'NOM_LOGO'
               }
        ]);
    },
EXT JS without Ext.grid.ColumnModel and with renderer:
    setCM : function(){
        this.cm = new Ext.grid.ColumnModel({
            columns: [         
                 {
                     dataIndex: 'NOM_LOGO',
                     name: 'LOGO_PRODUIT_ASSOCIE',
                     width: 50,
                     renderer: function(value, meta) {
                         var checked = (value == 1 ? 'checked = "checked"' : '');
                         return '<input type="checkbox" value="'+value+'" '+checked+' />';
                     }
                 },{
                    header: "Nom Logo",
                    dataIndex: 'NOM_LOGO',
                    width: 300
            }]
        });
    },
PHP function : 
    private function editerLogosCommandeProduit($nocde, $codpro, $lstLogosAssocies) {
        $this->dissocierLogosProduit($nocde, $codpro);
        if (is_array($lstLogosAssocies) && (count($lstLogosAssocies) > 0)) {
            $this->associerLogosProduit($nocde, $codpro, $lstLogosAssocies);
        }
    }

Actually, those things are observed:
-> Whether I use the Ext.grid.CheckColumn Class and checboxes are displayed but not clickable
-> Whether I use the Renderer function in Ext JS which is easier to use but I don't know how to send data to PHP. Furthermore, even if I add the name porperty in the checkbox, it does not appear in the HTML Inspection in the browser.

标签: javascriptphpextjs4.2

解决方案


var checkLogo = new Ext.grid.CheckColumn({
    dataIndex: 'CHECKED',
    editable: true,
    width: 28,
});

setCM : function(){
        this.cm = new Ext.grid.ColumnModel({
            columns: [         
                checkLogo,
                {
                    header: "Nom Logo",
                    dataIndex: 'NOM_LOGO',
                    width: 300
            }]
        });
    }

推荐阅读