【问题标题】:Dojo Dgrid row selection not working and retrieving the values of dgrid selectors?Dojo Dgrid 行选择不起作用并检索 dgrid 选择器的值?
【发布时间】:2013-10-29 06:44:19
【问题描述】:

目前我正在使用带有选择框、文本框和两个复选框的 Dojo dgrid,但我无法禁用整个行选择,而且当我单击第二个复选框时,dgrid 选择和取消选择不起作用,它反映了第一个复选框.

1.如何在dojo Dgrid中禁用整行选择? 2.点击保存时如何获取Dgrid选择框和Dgrid文本框的值? 3.如果我使用选择器(复选框)我无法呈现该列的标签?

var columns = {                 
    person :{
     sortable: false,
        renderCell: lang.hitch(this, function(object,value,node) {
            if(value == true){
                myTextBox = new dijit.form.TextBox({
                    name: "Amount",
                    value: "" ,
                    placeHolder: "Enter Amount"
                }).placeAt(node);                                   
            }
        })                          
    },
    description:{
        label:"description",
        field:"description",
        sortable: false,
        renderCell : lang.hitch(this, function(object,
                value, node, options) {             
            new Select({
                name : "select",
                options : [ {
                    label : "Daily",
                    value : "daily"
                }, {
                    label : "Weekly",
                    value : "weekly",                                   
                }]
            }).placeAt(node);

        }),

    },
    email : selector({
        sortable:false,
        field:"email"
    })
    /*i tried this instead of using selectors inserting a checkbox so that i can remove complete row selection but not working*/
    email: {
        sortable:false, 
        field:"email",
        renderHeaderCell : function(node) {
            var cellDiv = domConstruct.create("label", {
                innerHTML : "Email"
            }, node);                           
                var checkBox = new CheckBox({
                    name: "checkBox",
                    id:"emailAddress",
                    checked: false,             
            }, cellDiv);
        },
        renderCell:createMessageLabel                                           
    }   

};  

function createMessageLabel(object,value, node,options){
    console.log("node option",node);
        var checkbox = new CheckBox({
        name: "checkBox",
        id:"emailAddress",
        checked: false,                         
    }).placeAt(node);                   
};



var grid = new GridView().show(gridData, columns, "",
        "dgridAutoHeight", true);
function addSelection(self, event) {

    console.log("Row selected: ", event.rows[0].data);
}
function removeSelection(self, event) {

    console.log("Row deselected: ", event.rows[0].data);
}
grid.startup();


grid.on("dgrid-select", lang.hitch(grid, addSelection, this), true);
grid.on("dgrid-deselect", lang.hitch(grid, removeSelection, this), true);

希望我能得到一些有价值的答案......

【问题讨论】:

    标签: javascript dojo dgrid


    【解决方案1】:

    要禁用直接选择,请在传递给构造函数的属性中设置selectionMode: "none"。这不会影响通过 selector 列进行的选择。

    您应该仍然可以通过在传递给selector 列插件的对象中设置label 属性来在选择器列的标题单元格中设置标签。

    如果您想使用 Dijit 表单小部件来更改项目中字段的值,您可能不应该自己定义 renderCell 函数,而是使用 editor column plugin,它负责维护状态当您致电save 时,将其放回存储中。

    【讨论】:

    • 嗨,Ken,非常感谢您提供宝贵的答案..编辑器在上述情况下工作得非常完美,但我对渲染单元内的编辑器有疑问,请查看下面的回复希望您能帮助我解决... .
    【解决方案2】:

    非常感谢 Ken 的宝贵回答,正如您所说,编辑器非常适合上述情况......但我还有一个疑问,比如我们不能像下面这样在 renderCell 中使用编辑器,因为我需要这个值datachange 上的文本框,所以我想在 rendercell 中使用编辑器......下面的代码工作正常,但 TextBox 没有被放置在特定节点内(文本框视图没有被呈现),无论值是“True”...... .

        dollarThresholdAvailable :{
                        field: "dollarThresholdAvailable",
                        label : "Threshold Limit",
                         sortable: false,   
                         "class":"dollarThresholdAvailableValue",   
                            renderCell: lang.hitch(this, function(object,value,node) {  
                                if(value === true){
                                    editor({                                             
                                          field: "dollarThresholdAvailable",
                                          sortable: false                         
                                        },TextBox).placeAt(node);
                                }
                            }),         
                    }       
    

    【讨论】:

      猜你喜欢
      • 2013-01-23
      • 1970-01-01
      • 1970-01-01
      • 2013-11-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多