刷新页面在树视图中回调选定的复选框Kendo [英] Refresh page call back the selected checkboxes Kendo in treeview

问题描述

在这里，我应该单击复选框，然后使用提交按钮（AJAX）将数据发送到数据库中。单击提交按钮后，将刷新页面，但所有选中的复选框都消失了。刷新页面后如何保存选定的复选框？有任何想法或指导吗？

AJAX

  // AJAX调用按钮
 $（＃primaryTextButton）。kendoButton（）; 
 var button = $（＃primaryTextButton）。data（ kendoButton）; 
 button.bind（ click，function（e）{
 
 var test = $（＃dropdown）。val（）
 
 $ .ajax （{{
 url： ../DesignationProgramTemplate/getTemplate.php，
类型： post，
数据：{'id'：test，'progid'：array}，
 success：function（）{
 //您将从您的php页面获得响应（回显或打印内容）
 kendo.alert（'Success'）; //警报通知
 //刷新
 //location.reload(\"http://hq-global.winx.ehors.com:9280/ehors/HumanResource/EmployeeManagement/DesignationProgramTemplate/template.php）; 
} ，
}），
}）； 
  

用于getTemplate的PHP

  $ employeeID = $ _SESSION ['employeeID']; 
 $ propertyID = $ _SESSION [’propertyID’]; 
 $ id = $ _POST [’id’]; 
 $ progid = $ _POST [’progid’]； 
 
 for（$ x = 0; $ x< sizeof（$ progid）; $ x ++）
 {
 $ array = array（）; 
 
 $ positionTemplateID = $ ehorsObj-> EHORS_PK（ tblHrsPositionProgramTemplate）; 
 $ sqlAdd =将内容插入tblHrsPositionProgramTemplate 
 SET positionTemplateID =’。 $ positionTemplateID。 ’，
 programID =’。 $ progid [$ x]。 ’，
 hrsPositionID =‘。 $ id。 ’，
 propertyID =’。 $ propertyID。 ’，
 employeeID =’。 $ employeeID。 ’，
 dateTimeEmployee = NOW（）; 
 
 $ ehorsObj-> ExecuteData（$ sqlAdd，$ ehorsObj-> DEFAULT_PDO_CONNECTIONS）; 
 
 $ positionTemplateIDLog = $ ehorsObj-> EHORS_PK（ tblHrsPositionProgramTemplateLog）; 
 $ sqlAddLog =插入到tblHrsPositionProgramTemplateLog 
 SET positionTemplateIDLog =’。 $ positionTemplateIDLog。 ’，
 positionTemplateID =’。 $ positionTemplateID。 ’，
 programID =’。 $ progid [$ x]。 ’，
 hrsPositionID =‘。 $ id。 ’，
 propertyID =’。 $ propertyID。 ’，
 employeeID =’。 $ employeeID。 ’，
 dateTimeEmployee = NOW（）; 
 
 $ ehorsObj-> ExecuteData（$ sqlAddLog，$ ehorsObj-> DEFAULT_PDO_CONNECTIONS）; 
} 
  

复选框功能

  function CheckedNodeIds（nodes，checkedNodes）{
 for（var i = 0; i  if（nodes [i] .checked）{
 //checkedNodes.push(nodes[i].moduleID）; 
 //checkedNodes.push(nodes[i].groupID）; 
 CheckedNodes.push（nodes [i] .id）; 
} 
 
 if（nodes [i] .hasChildren）{
checkedNodeIds（nodes [i] .children.view（），CheckedNodes）; 
} 
} 
 
} 
  

复选框检查

 函数toggleCheckAll（）{
 var checkButtonValue = $（＃chbAll）。val（）; 
 
 if（checkButtonValue == Uncheck）{
 $（＃AccountingTree .k-checkbox-wrapper输入）.prop（ checked，true）.trigger（ change ）； 
 $（＃AdminSystemTree .k-checkbox-wrapper输入）.prop（ checked，true）.trigger（ change）; 
 
 $（＃chbAll）。val（检查）; 
} else {
 $（＃AccountingTree .k-checkbox-wrapper输入）.prop（ checked，false）.trigger（ change）; 
 $（＃AdminSystemTree .k-checkbox-wrapper input）。prop（ checked，false）.trigger（ change）; 
 
 $（＃chbAll）。val（取消选中）; 
 
} 
  

}

HTML

 < div class = selectAll> 
< input type = checkbox id = chbAll value =取消选中 class = k-checkbox onchange = toggleCheckAll（） /> 
 
< label class = k-checkbox-label for = chbAll>全选< / label> 
  

有人知道吗？

输出

解决方案

使用此方法可以保存选中的框，并使用 GET 方法记住它。

  
< html> 
 
< body> 
 
< form method = get action => 
 
<输入类型=复选框 name = vehicle1 value =自行车>我有一辆自行车。 
< input type = checkbox name = vehicle2 value = Car>我有车< b> 
< input type = checkbox name = vehicle3 value = Boat>我有一条船。 
 
<输入类型= submit name = submit> 
 
< / form> 
 
< / body> 
 
< script> 
 
 var a = window.location.search.substr（1）.split（’&’）; 
 console.log（a）; 
函数test（value，index）{a [index] = value.split（ =）; } 
函数test2（value，index）{console.log（document.getElementsByName（value [0]））; document.getElementsByName（value [0]）[0] .checked = true; } 
 a.forEach（test）; 
 a.forEach（test2）; 
 
< / script> 
 
< / html> 
 
  

Here, I supposed to click the checkboxes then I send the data into database using submit button (AJAX). After click on submit button, it will be refresh the page but all the selected checkboxes gone. How I do to keep the selected checkboxes after refresh the page? Any idea or guide to do it?

AJAX

//AJAX call for button
    $("#primaryTextButton").kendoButton();
    var button = $("#primaryTextButton").data("kendoButton");
    button.bind("click", function(e) {

    var test = $("#dropdown").val()

    $.ajax({
        url: "../DesignationProgramTemplate/getTemplate.php",
        type: "post",
            data: {'id':test,'progid':array},
                success: function () {
                // you will get response from your php page (what you echo or print)                 
                    kendo.alert('Success'); // alert notification
                    //refresh
                    //location.reload("http://hq-global.winx.ehors.com:9280/ehors/HumanResource/EmployeeManagement/DesignationProgramTemplate/template.php");
                },
        });
    });

PHP for getTemplate

$employeeID = $_SESSION['employeeID'];
$propertyID = $_SESSION['propertyID'];
$id = $_POST['id'];
$progid = $_POST['progid'];

for($x=0; $x< sizeof($progid); $x++ )
{
    $array = array();   

$positionTemplateID = $ehorsObj->EHORS_PK("tblHrsPositionProgramTemplate"); 
$sqlAdd = "INSERT INTO tblHrsPositionProgramTemplate 
            SET positionTemplateID = '" . $positionTemplateID . "',
            programID = '" . $progid[$x] . "',
            hrsPositionID  = '" . $id . "',
            propertyID   = '" . $propertyID . "',
            employeeID  = '" . $employeeID . "',
            dateTimeEmployee = NOW() ";     

$ehorsObj->ExecuteData($sqlAdd, $ehorsObj->DEFAULT_PDO_CONNECTIONS);

$positionTemplateIDLog = $ehorsObj->EHORS_PK("tblHrsPositionProgramTemplateLog");   
$sqlAddLog = "INSERT INTO tblHrsPositionProgramTemplateLog 
            SET positionTemplateIDLog = '" . $positionTemplateIDLog . "',
            positionTemplateID = '" . $positionTemplateID . "',
            programID = '" . $progid[$x] . "',
            hrsPositionID  = '" . $id . "',
            propertyID   = '" . $propertyID . "',
            employeeID  = '" . $employeeID . "',
            dateTimeEmployee = NOW() ";     

$ehorsObj->ExecuteData($sqlAddLog, $ehorsObj->DEFAULT_PDO_CONNECTIONS);
}

Function for checkboxes

function checkedNodeIds(nodes, checkedNodes) {
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i].checked) {
      //checkedNodes.push(nodes[i].moduleID);
     // checkedNodes.push(nodes[i].groupID);
      checkedNodes.push(nodes[i].id);
    }

    if (nodes[i].hasChildren) {
      checkedNodeIds(nodes[i].children.view(), checkedNodes);
    }
  }

}

Checkboxes check

function toggleCheckAll() {
        var checkButtonValue = $("#chbAll").val();

        if(checkButtonValue == "Uncheck"){
          $("#AccountingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
          $("#AdminSystemTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");

          $("#chbAll").val("Check");
        } else {
          $("#AccountingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
          $("#AdminSystemTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");

          $("#chbAll").val("Uncheck");

        }

}

HTML

<div class="selectAll">
  <input type="checkbox" id="chbAll" value="Uncheck" class="k-checkbox" onchange="toggleCheckAll()" />

  <label class="k-checkbox-label" for="chbAll">Select All</label>

Anyone have the idea about it?

Output

解决方案

With this you can save the checked boxes, remember its with GET method.

<html>

<body>

<form method="get" action="">

    <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
    <input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
    <input type="checkbox" name="vehicle3" value="Boat"> I have a boat<br>

    <input type="submit" name="submit">

</form>

</body>

    <script>

        var a = window.location.search.substr(1).split('&');
        console.log(a);
        function test(value, index){ a[index] = value.split("="); }
        function test2(value, index){ console.log(document.getElementsByName(value[0])); document.getElementsByName(value[0])[0].checked = true; }
        a.forEach(test);
        a.forEach(test2);

    </script>

</html>

这篇关于刷新页面在树视图中回调选定的复选框Kendo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！