Question

这个问题是在Kendo网格的背景下，但我相信它同样适用于传统的桌子。

网格左侧有项目，有关项目经过的步骤。部分功能是，如果选中复选框，则无论初始状态如何，都会将行中所有前面的复选框设置为检查。

这是（由于Kendo网格）假定在JQuery函数中处理，其中函数检查是否选中了特定复选框，然后将相同的选中状态应用于特定行的所有复选框对应于选中复选框之前出现的类。

我会相信（根据我目前对JQuery的有限知识，以及剪切/粘贴各种类似的代码片段），设置前面的复选框需要类似下面的代码：

$("#Step2").change(function(){
    if ($('#Step2').is(':checked')) {
        $(this).parents('tr').closest(".Step1:checkbox").prop("checked", true);
    }
    else
    {
        $(this).parents('tr').closest(".Step1:checkbox").prop("checked", false);
    }
});

然而，这并没有根据需要选择上一步的复选框。

如果有帮助的话，Kendo网格的列如下：

columns: [
    { field: "Item" },
    { field: "Step1", title: "Step 1", attributes: {style: "text-align: center"}, template: '<input class="Step1" id="Step1" type="checkbox" #= Step1 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 1<br/><input type="checkbox" id="step1Toggle"></input></div>' },
    { field: "Step2", title: "Step 2", attributes: {style: "text-align: center"}, template: '<input class="Step2" id="Step2" type="checkbox" #= Step2 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 2<br/><input type="checkbox" id="step2Toggle"></input></div>' },
    { field: "Step3", title: "Step 3", attributes: {style: "text-align: center"}, template: '<input class="Step3" id="Step3" type="checkbox" #= Step3 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 3<br/><input type="checkbox" id="step3Toggle"></input></div>' },
    { field: "Step4", title: "Step 4", attributes: {style: "text-align: center"}, template: '<input class="Step4" id="Step4" type="checkbox" #= Step4 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 4<br/><input type="checkbox" id="step4Toggle"></input></div>' },
    { field: "Step5", title: "Step 5", attributes: {style: "text-align: center"}, template: '<input class="Step5" id="Step5" type="checkbox" #= Step5 ? "checked=checked" : "" # ></input>', headerTemplate: '<div style="text-align:center">Step 5<br/><input type="checkbox" id="step5Toggle"></input></div>' }
]

Answer 1

从你的帖子和我之前的评论中我认为你想要实现的功能可以在下面的jFiddle中看到：

http://jsfiddle.net/neilhibbert/kmc6z/10/

HTML：

<div id="wrapper">
    <div id="grid"></div>
</div>
<div style="clear:both"></div>
<br/>

Kendo UI / JS

var dataModel = [{ ColourId: 1, Colour: "Red", Step1: true, Step2: false, Step3: false, Step4: false, Step5: false},{ ColourId: 2, Colour: "Green", Step1: false, Step2: false, Step3: false, Step4: false, Step5: false},{ ColourId: 3, Colour: "Blue", Step1: false, Step2: false, Step3: false, Step4: false, Step5: false}];

$('#grid').kendoGrid({
    dataSource: {
        transport:{
            read: function(o) {
                o.success(dataModel);
            },
            create: function(o) {
                o.success(o.data);
            },
            update: function(o) {
                var dataItem = o.data, i, j;
                for(i = 5; i>0; i-=1) {
                    if(dataItem['Step' + i] === true) {
                        for(j = i-1; j>0; j-=1) {
                            dataItem['Step' + j] = true;
                        }
                    }
                }
                o.success(dataItem);
            },
            destroy: function(o){
                o.success(o.data);
            }
        },
        schema: {
            data: function(response) { return response || []; },
            model: {
                id: 'ColourId',
                fields: {
                    ColourId: { type: 'number' },
                    Colour: { type: 'string', editable: false },
                    Step1: { type: 'boolean' },
                    Step2: { type: 'boolean' },
                    Step3: { type: 'boolean' },
                    Step4: { type: 'boolean' },
                    Step5: { type: 'boolean' },
                }
            }
        }
    },
    editable: {
        mode: 'inline'
    },
    save: function(e) {
        this.dataSource.sync();
    },
    columns: [
        {
            title: 'Colour',
            field: 'Colour'
        },
        {
            title: 'Step 1',
            field: 'Step1',
            template: '<input name="Step1" type="checkbox" disabled #=Step1 === true ? "checked" : ""# />'
        },
        {
            title: 'Step 2',
            field: 'Step2',
            template: '<input name="Step2" type="checkbox" disabled #=Step2 === true ? "checked" : ""# />'
        },
        {
            title: 'Step 3',
            field: 'Step3',
            template: '<input name="Step3" type="checkbox" disabled #=Step3 === true ? "checked" : ""# />'
        },
        {
            title: 'Step 4',
            field: 'Step4',
            template: '<input name="Step4" type="checkbox" disabled #=Step4 === true ? "checked" : ""# />'
        },
        {
            title: 'Step 5',
            field: 'Step5',
            template: '<input name="Step5" type="checkbox" disabled #=Step5 === true ? "checked" : ""# />'
        },
        {
            title: 'Actions',
            command: [ 'edit' ]
        }
    ]
});

我希望这会有所帮助。该示例使用本地数据源，但主体是相同的，唯一需要注意的是，这使用了网格编辑/非编辑模式，所以我不知道有多少交易破坏者...... / p>

选择/取消选择行中的特定复选框

1 个答案: