Question

我有以下dataTable元素：

<div id="searchable_wrapper" class="dataTables_wrapper form-inline" role="grid">
    <table id="termGridParametersTable" class="table table-bordered table-hover table-striped dataTable" aria-describedby="searchable_info">
        <thead>
            <tr>
                <th th:text="#{gen.code}" />
                <th th:text="#{gen.desc}" />
                <th th:text="#{termGrid.paramType}" />
                <th th:text="#{termGrid.paramValue}" />
            </tr>
        </thead>

        <tbody>
            <tr th:each="gridEffectiveParam : ${effectivePojo.effectiveParameters}">
                <td th:text="${gridEffectiveParam.parameter.code}" />
                <td th:text="${gridEffectiveParam.parameter.description}" />
                <td th:text="#{'termGrid.' + ${gridEffectiveParam.parameter.contractParameterType}}" />
                <td>

                    <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.boolean')}">
                        <input type="checkbox" name="booleanValue" th:onchange="'updateValue(\'' + ${gridEffectiveParam.id} + '\', this);'" th:checked="${gridEffectiveParam.booleanValue}" class="checkbox-slider colored-darkorange" />
                        <span class="text"></span>
                    </th:block>

                    <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.float')}">
                        <input class="form-control" type="text" id="floatValue" th:onblur="'updateValue(\'' + ${gridEffectiveParam.id} + '\', this);'" th:value="${gridEffectiveParam.value}" />
                    </th:block>

                    <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.integer')}">
                        <input class="form-control" type="text" id="intValue" th:onblur="'updateValue(\'' + ${gridEffectiveParam.id} + '\', this);'" th:value="${gridEffectiveParam.value}" />
                    </th:block>
                </td>
            </tr>
        </tbody>
    </table>
</div>

updateValue() javascript函数运行良好，如下：

function updateValue(id,value) {
    $.ajax({
        url: "updateEffectiveParameter?id=" + id + "&value=" + value.value,
    type: "GET",
    datatype:"json",
    contentType: 'application/json',
    mimeType: 'application/json', 
    success: function(response){
        if(!response){
            bootbox.alert("a problem occured");
        }
    },
    error: function(e){
        alert('error message');
    }
});

但我只能通过点击前一个字段中的TAB并点击空格键来更改复选框滑块值。没有鼠标选择。

我知道这与DataTables JS component有关。

这里有什么问题以及如何让它发挥作用？

Answer 1

第一个复选框为th:onchange，第二个和第三个复选框为th:onblur。我想你需要在所有三个中使用th:onchange。

为什么复选框滑块不适用于鼠标？

1 个答案: