KenDoGrid中使用checkbox

最新推荐文章于 2020-12-19 09:56:24 发布

原创最新推荐文章于 2020-12-19 09:56:24 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

KenDoUI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在KenDoGrid组件中利用checkbox进行行选择，并演示了删除选中行的JavaScript代码实现，适用于JSP开发中的数据操作场景。

jsp部分

<div id="gridStaff" style="height: calc(100% - 35px);"></div>
						<div style="margin-top: 5px">
							<button id="addBtn1">新增</button>
							<button id="editBtn1">修改</button>
							<button id="updateBtn1" disabled="true">保存</button>
							<button id="cancelBtn1" disabled="true">取消</button>
							<button id="deleteBtn1">删除</button>
						</div>

js部分

function initStaff() {
	var dataSourceStaff = new kendo.data.DataSource({
		transport: {
		},
		batch : true,
		page: 1,
		pageSize: 10,
		schema: {
			data: function (d) {
				return d.data;
			},
			total: function (d) {
				return d.total;
			},
			model: { 
				id: "id",
				fields: {
					code:{},
					name:{}
				}
			}
		}
	});
	$("#gridStaff").kendoGrid({
		dataSource: dataSourceStaff,
		columns:[
		        {title:"<input type='checkbox'/>", template: '<input type="checkbox" id="checkbox1"  #= isSelect ? \'checked="checked"\' : "" # class="checkbox"/>',width:35},
		 		{field: "code", title:"人员编号"},
				{field: "name", title: "姓名"}
        ],
		pageable: _pageable,
		messages: _messages,
		editable:  {
			mode: "inline",
		},
        resizable: true,
        selectable: "row",
	$("#gridStaff").on("change", "input.checkbox", function(e) {
		var grid = $("#gridStaff").data("kendoGrid"),
		dataItem = grid.dataItem($(e.target).closest("tr"));
		dataItem.set("isSelect", this.checked);
	});
}

删除选中的行

function deleteData1 () {
	var gridDetail= $("#gridStaff").data("kendoGrid").dataSource.data().toJSON();;
	var dataMap=[];
	for(var i=0;i<gridDetail.length;i++){
		 if(gridDetail[i].isSelect == true){
		   dataMap.push(gridDetail[i]);
		}
	}
}

dataMap即为将要删除的数据