Kendo ui 带复选框的剑道树列表_Kendo Ui_Kendo Asp.net Mvc_Kendo Treeview

Kendo ui 带复选框的剑道树列表

kendo-ui

Kendo ui 带复选框的剑道树列表,kendo-ui,kendo-asp.net-mvc,kendo-treeview,Kendo Ui,Kendo Asp.net Mvc,Kendo Treeview,我使用一个剑道UI树列表控件，需要每个父节点都是一个复选框。我已经在树列表中搜索了如何使用复选框，但还没有找到任何示例。有人知道怎么做吗？如果可能的话？您可以使用CSS将箭头（精灵背景）替换为复选框 .k-i-expand, .k-plus, .k-plus-disabled { background: url(http://i.stack.imgur.com/zQtSf.png) top left !important; } .k-i-collapse, .k-minus, .k-mi

我使用一个剑道UI树列表控件，需要每个父节点都是一个复选框。我已经在树列表中搜索了如何使用复选框，但还没有找到任何示例。有人知道怎么做吗？如果可能的话？

您可以使用CSS将箭头（精灵背景）替换为复选框

.k-i-expand, .k-plus, .k-plus-disabled {
   background: url(http://i.stack.imgur.com/zQtSf.png) top left !important;
}

.k-i-collapse, .k-minus, .k-minus-disabled {
   background: url(http://i.stack.imgur.com/5tDmY.png) top left !important;
}

我在树形剑道UI中工作，我绑定了父id，还创建了另一个列名为“manualparentid”，也是parentid。可能是我做错了，但您可以在模板上设置条件

//Created Separate Class
public class TreePermission
{
   public int menuid { get; set; }
   public int parentmenuid { get; set; }
   public string menuname { get; set; }
   public bool isadd { get; set; } 
   public int manualparentid { get; set; }
}


 Html.Kendo().TreeList<TSBBAL.BAL.TreePermission>()
.Name("GridRolePermissions")
.Columns(colums =>
{
    colums.Add().Field(e => e.menuname).Width(150).Title("Menu Name");
    colums.Add().Field(e => e.isadd).Width(100).Title("Add").TemplateId("addtemplate"); 
}).DataSource(data => data.AutoSync(false)
    .ServerOperation(true)
    .Model(m =>
    {
        m.Id(f => f.menuid);
        m.ParentId(f => f.parentmenuid);
        m.Field(f => f.menuname);
        m.Field(f => f.isadd);  
        m.Expanded(true);
    }).Read(read => read.Action("MenuList", "User"))
)

//创建了单独的类
公共类树权限
{
public int menuid{get；set；}
public int parentmenuid{get；set；}
公共字符串菜单名{get；set；}
公共bool isadd{get；set；}
public int manualparentid{get；set；}
}
Html.Kendo（）.TreeList（）
.名称（“GridRolePermissions”）
.列（列=>
{
colums.Add（）.Field（e=>e.menuname）.Width（150）.Title（“菜单名”）；
colums.Add（）.Field（e=>e.isadd）.Width（100）.Title（“Add”）.TemplateId（“addtemplate”）；
}).DataSource（data=>data.AutoSync（false）
.ServerOperation（真）
.Model（m=>
{
m、 Id（f=>f.menuid）；
m、 ParentId（f=>f.parentmenuid）；
m、 字段（f=>f.menuname）；
m、 字段（f=>f.isadd）；
m、 扩展（真）；
}).Read（Read=>Read.Action（“菜单列表”、“用户”））
)

创建模板addtemplate

 <script id="addtemplate" type="text/x-kendo-template">  
<div class="col-md-6">       

# if(manualparentid !=0) {# 
    <input type="checkbox" onclick="CheckThePermission(#=menuid #,#=manualparentid #,'add')" id="chkadd_#=menuid #" mid="#=menuid #"  pid="add_#=manualparentid #"   name="chkadd" #= isadd ? checked='checked' : '' # /> 
#} else {#   
    <input type="checkbox" onclick="CheckChildPermission(#=menuid #,'add')" id="chkadd_#=menuid #" mid="#=menuid #"  pid="add_#=manualparentid #"   name="chkadd" #= isadd ? checked='checked' : '' # /> 

#}#
</div>


#如果（manualparentid！=0）{#
#}否则{#
#}#


功能检查许可证（id、pid、obj）{
//您将获得父id
}

希望这有助于……

通过模板化，只需在父对象上选中复选框即可轻松完成。以下是一个示例模板：

<script id="treelist-checkbox-template" type="text/x-kendo-template">
    # if ( hasChildren ) { #
        <input type='checkbox' name='checkedFiles[#= id #]' value='true' />
    # } #
</script>

这里有一个Dojo的工作示例：

我正在使用KenDotreList复选框进行策略管理，请查看我的示例，我希望对您有用

策略模型

  public class PolicyModel
{
    public PolicyModel(){}
    public string PolicyId { get; set; }
    public string PolicyName { get; set; }
    public string ParentID{ get; set; }
 }

PolicyTreeListModel

 public class PolicyTreeListModel
{
    public PolicyTreeListModel(){}
    public string id { get; set; }
    public string text { get; set; }
    public List<PolicyTreeListModel> items { get; set; }
    public bool expanded { get; set; }
 }

公共类PolicyTreeListModel
{
public PolicyTreeListModel（）{}
公共字符串id{get；set；}
公共字符串文本{get；set；}
公共列表项{get；set；}
公共布尔扩展{get；set；}
}

策略webAPI控制器

    public class PoliciesController : ApiController
    {
        public IEnumerable<PolicyTreeListModel> GetPoliciesTree()
        {
            List<PolicyTreeListModel> ToReturen = new List<PolicyTreeListModel>();

            List<PolicyModel> DataFromDB = new List<PolicyModel>();
            using (var db = DBManager.CreateNewContext())
            {
                var data = db.Policies.ToList();
                foreach (var item in data)
                {
                    DataFromDB.Add(new PolicyModel() { PolicyId = item.PolicyId, PID = item.PID });
                }
            }
            foreach (var item in DataFromDB.Where(e => e.PID == null))
            {
                toreturen.Add(new PolicyTreeListModel()
                {
                    id = item.PolicyId,
                    text = item.PolicyName,
                    expanded = true,
                    items = GetSubItems(DataFromDB.ToList(), new List<PolicyTreeListModel>(), item.PolicyId)
                });
            }

            return ToReturen.OrderByDescending(e => e.text).ToList();
        }

     public List<PolicyTreeListModel> GetSubItems(List<PolicyModel> OrginalData,List<PolicyTreeListModel> SubItems,string PID)
        {
                foreach (var item in OrginalData.Where(e=>e.PID==PID))
                {
                    if (!SubItems.Any(e => e.id == item.PolicyId))
                        SubItems.Add(new PolicyTreeListModel() { id = item.PolicyId, text = item.PolicyName, expanded = true, items = GetItems(OrginalData, new List<Models.PolicyTreeListModel>(),item.PolicyId)});
                }
                return SubItems;
        }
    }

公共类策略控制器：ApiController
{
公共IEnumerable GetPoliciesTree（）
{
List ToReturen=新列表（）；
List DataFromDB=新列表（）；
使用（var db=DBManager.CreateNewContext（））
{
var data=db.Policies.ToList（）；
foreach（数据中的var项）
{
DataFromDB.Add（新的PolicyModel（）{PolicyId=item.PolicyId，PID=item.PID}）；
}
}
foreach（DataFromDB.Where（e=>e.PID==null）中的var项）
{
添加（新的PolicyTreeListModel（）
{
id=item.PolicyId，
text=item.PolicyName，
扩展=真，
items=GetSubItems（DataFromDB.ToList（）、new List（）、item.PolicyId）
});
}
返回ToReturen.OrderByDescending（e=>e.text.ToList（）；
}
公共列表GetSubItems（列表原始数据、列表子项、字符串PID）
{
foreach（OrginalData.Where（e=>e.PID==PID）中的变量项）
{
如果（！SubItems.Any（e=>e.id==item.PolicyId））
添加（新的PolicyTreeListModel（）{id=item.PolicyId，text=item.PolicyName，expanded=true，items=GetItems（OrginalData，new List（），item.PolicyId）}）；
}
返回子项；
}
}

HTML代码

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="styles/kendo.common.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
        <link rel="stylesheet" href="styles/bootstrap.min.css" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        <div class="col-lg-12">
            <div class="form-group" style="width:100%">
                <div class="form-inline" style="background-color: #428bca;">
                    <input class="k-textbox" placeholder="Search..." style="font-size:smaller;width:230px;margin-left:2px" id="searchTree" />
                    <label style="font-size:smaller;padding:2px;margin:2px;color:white"><input class="checkbox" style="font-size:smaller;padding:2px;margin:2px" id="chbAll" type="checkbox" value="" /><b>Select All</b></label>
                    <label style="font-size:smaller;padding:2px;margin:2px;color:white"><input class="checkbox" style="font-size:smaller;padding:2px;margin:2px" id="expandAll" type="checkbox" value="" /><b>Expand All</b></label>
                    <button class="btn btn-success" id="savePolicies" style="padding:5px;margin:2px;width:100px;font-family:sans-serif"><i class="fa fa-floppy-o" style="font-size:medium"> Save</i></button>
                    <button class="btn btn-default" id="clearPolicoies" style="padding:5px;margin:2px;width:100px;font-family:sans-serif"><i class="fa fa-eraser" style="font-size:medium;"> Clear</i></button>
                </div>
                <div id="policiestree" style="height:520px;width:100%;background-color: gainsboro;font-size:small;text-align:left;font-weight:bold"></div>
            </div>
        </div>
 <script>
            $(document).ready(function() {
     $("#policiestree").kendoTreeView({
                checkboxes: { checkChildren: true },
                dataSource: [],
            });
            $("#searchTree").on("input", function () {
                var query = this.value.toLowerCase();
                var dataSource = $("#policiestree").data("kendoTreeView").dataSource;
                filter(dataSource, query);
            });
            $("#chbAll").click(function () {
                chbAllOnChange();
            });
            $("#expandAll").attr("checked", true);
            $("#expandAll").click(function () {
                var treeView = $("#policiestree").data("kendoTreeView");
                if (this.checked) { treeView.expand(".k-item"); }
                else { treeView.collapse(".k-item"); }
            });
            function filter(dataSource, query) {
                var hasVisibleChildren = false;
                var data = dataSource instanceof kendo.data.HierarchicalDataSource && dataSource.data();
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var text = item.text.toLowerCase();
                    var itemVisible =
                        query === true // parent already matches
                        || query === "" // query is empty
                        || text.indexOf(query) >= 0; // item text matches query
                    var anyVisibleChildren = filter(item.children, itemVisible || query); // pass true if parent matches
                    hasVisibleChildren = hasVisibleChildren || anyVisibleChildren || itemVisible;
                    item.hidden = !itemVisible && !anyVisibleChildren;
                }
                if (data) {
                    // re-apply filter on children
                    dataSource.filter({ field: "hidden", operator: "neq", value: true });
                }
                return hasVisibleChildren;
            }
            function checkUncheckAllNodes(nodes, checked) {
                for (var i = 0; i < nodes.length; i++) {
                    nodes[i].set("checked", checked);

                    if (nodes[i].hasChildren) {
                        checkUncheckAllNodes(nodes[i].children.view(), checked);
                    }
                }
            }
            function chbAllOnChange() {
                var checkedNodes = [];
                var treeView = $("#policiestree").data("kendoTreeView");
                var isAllChecked = $('#chbAll').prop("checked");
                checkUncheckAllNodes(treeView.dataSource.view(), isAllChecked)
            }
            function GetPoliciesTree() {
                $.ajax({
                    url: "/api/Policies/GetPoliciesTree",
                    success: function (result) {
                        $("#policiestree").data("kendoTreeView").dataSource.data(result);
                    }
                });
            }
});
 </script>
    </body>
    </html>


全选
全部展开
拯救
清楚的
$（文档）.ready（函数（）{
$（“#policiestree”）.kendoTreeView({
复选框：{checkChildren:true}，
数据源：[]，
});
$（“#搜索树”）。在（“输入”，函数（）{
var query=this.value.toLowerCase（）；
var dataSource=$（“#policiestree”）.data（“kendoTreeView”）.dataSource；
过滤器（数据源、查询）；
});
$（“#chbAll”）。单击（函数（）{
chballochange（）；
});
$（“#expandAll”）.attr（“选中”，为真）；
$（“#expandAll”）。单击（函数（）{
var treeView=$（“#policiestree”）.data（“kendoTreeView”）；
如果（this.checked）{treeView.expand（“.k-item”）；}
else{treeView.collapse（“.k-item”）；}
});
函数过滤器（数据源、查询）{
var hasVisibleChildren=false；
var data=kendo.data.hierarcialDataSource的dataSource实例&&dataSource.data（）；
对于（变量i=0；i=0；//项文本与查询匹配
var anyVisibleChildren=filter（item.children，itemVisible | | query）；//如果父项匹配，则传递true
hasVisibleChildren=hasVisibleChildren | | anyVisibleChildren | | itemVisible；
item.hidden=！itemVisible&&！anyVisibleChildren；
}
如果（数据）{
//在儿童身上重新应用过滤器
filter（{field:“hidden”，operator:“neq”，value:true}）；
    public class PoliciesController : ApiController
    {
        public IEnumerable<PolicyTreeListModel> GetPoliciesTree()
        {
            List<PolicyTreeListModel> ToReturen = new List<PolicyTreeListModel>();

            List<PolicyModel> DataFromDB = new List<PolicyModel>();
            using (var db = DBManager.CreateNewContext())
            {
                var data = db.Policies.ToList();
                foreach (var item in data)
                {
                    DataFromDB.Add(new PolicyModel() { PolicyId = item.PolicyId, PID = item.PID });
                }
            }
            foreach (var item in DataFromDB.Where(e => e.PID == null))
            {
                toreturen.Add(new PolicyTreeListModel()
                {
                    id = item.PolicyId,
                    text = item.PolicyName,
                    expanded = true,
                    items = GetSubItems(DataFromDB.ToList(), new List<PolicyTreeListModel>(), item.PolicyId)
                });
            }

            return ToReturen.OrderByDescending(e => e.text).ToList();
        }

     public List<PolicyTreeListModel> GetSubItems(List<PolicyModel> OrginalData,List<PolicyTreeListModel> SubItems,string PID)
        {
                foreach (var item in OrginalData.Where(e=>e.PID==PID))
                {
                    if (!SubItems.Any(e => e.id == item.PolicyId))
                        SubItems.Add(new PolicyTreeListModel() { id = item.PolicyId, text = item.PolicyName, expanded = true, items = GetItems(OrginalData, new List<Models.PolicyTreeListModel>(),item.PolicyId)});
                }
                return SubItems;
        }
    }

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="styles/kendo.common.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
        <link rel="stylesheet" href="styles/bootstrap.min.css" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        <div class="col-lg-12">
            <div class="form-group" style="width:100%">
                <div class="form-inline" style="background-color: #428bca;">
                    <input class="k-textbox" placeholder="Search..." style="font-size:smaller;width:230px;margin-left:2px" id="searchTree" />
                    <label style="font-size:smaller;padding:2px;margin:2px;color:white"><input class="checkbox" style="font-size:smaller;padding:2px;margin:2px" id="chbAll" type="checkbox" value="" /><b>Select All</b></label>
                    <label style="font-size:smaller;padding:2px;margin:2px;color:white"><input class="checkbox" style="font-size:smaller;padding:2px;margin:2px" id="expandAll" type="checkbox" value="" /><b>Expand All</b></label>
                    <button class="btn btn-success" id="savePolicies" style="padding:5px;margin:2px;width:100px;font-family:sans-serif"><i class="fa fa-floppy-o" style="font-size:medium"> Save</i></button>
                    <button class="btn btn-default" id="clearPolicoies" style="padding:5px;margin:2px;width:100px;font-family:sans-serif"><i class="fa fa-eraser" style="font-size:medium;"> Clear</i></button>
                </div>
                <div id="policiestree" style="height:520px;width:100%;background-color: gainsboro;font-size:small;text-align:left;font-weight:bold"></div>
            </div>
        </div>
 <script>
            $(document).ready(function() {
     $("#policiestree").kendoTreeView({
                checkboxes: { checkChildren: true },
                dataSource: [],
            });
            $("#searchTree").on("input", function () {
                var query = this.value.toLowerCase();
                var dataSource = $("#policiestree").data("kendoTreeView").dataSource;
                filter(dataSource, query);
            });
            $("#chbAll").click(function () {
                chbAllOnChange();
            });
            $("#expandAll").attr("checked", true);
            $("#expandAll").click(function () {
                var treeView = $("#policiestree").data("kendoTreeView");
                if (this.checked) { treeView.expand(".k-item"); }
                else { treeView.collapse(".k-item"); }
            });
            function filter(dataSource, query) {
                var hasVisibleChildren = false;
                var data = dataSource instanceof kendo.data.HierarchicalDataSource && dataSource.data();
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var text = item.text.toLowerCase();
                    var itemVisible =
                        query === true // parent already matches
                        || query === "" // query is empty
                        || text.indexOf(query) >= 0; // item text matches query
                    var anyVisibleChildren = filter(item.children, itemVisible || query); // pass true if parent matches
                    hasVisibleChildren = hasVisibleChildren || anyVisibleChildren || itemVisible;
                    item.hidden = !itemVisible && !anyVisibleChildren;
                }
                if (data) {
                    // re-apply filter on children
                    dataSource.filter({ field: "hidden", operator: "neq", value: true });
                }
                return hasVisibleChildren;
            }
            function checkUncheckAllNodes(nodes, checked) {
                for (var i = 0; i < nodes.length; i++) {
                    nodes[i].set("checked", checked);

                    if (nodes[i].hasChildren) {
                        checkUncheckAllNodes(nodes[i].children.view(), checked);
                    }
                }
            }
            function chbAllOnChange() {
                var checkedNodes = [];
                var treeView = $("#policiestree").data("kendoTreeView");
                var isAllChecked = $('#chbAll').prop("checked");
                checkUncheckAllNodes(treeView.dataSource.view(), isAllChecked)
            }
            function GetPoliciesTree() {
                $.ajax({
                    url: "/api/Policies/GetPoliciesTree",
                    success: function (result) {
                        $("#policiestree").data("kendoTreeView").dataSource.data(result);
                    }
                });
            }
});
 </script>
    </body>
    </html>