0

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

网格在左侧有项目和与项目经历的步骤相关的列。部分功能是，如果选中了一个复选框，则该行中所有前面的复选框都将设置为选中，而不管它们的初始状态如何。

这（由于 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);
    }
});

但是，这不会根据需要选择上一步的复选框。

如果有帮助，剑道网格的列如下：

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>' }
]
4

1 回答 1

0

根据您的帖子和我之前的评论，我认为您希望实现的功能可以在下面的 jFiddle 中看到：

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

html:

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

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

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

于 2013-10-15T15:18:50.613 回答