Jquery 通过使用剑道在子网格中选择一行，将记录添加到父网格
我如何更新主服务器（父服务器）通过使用kendo ui在子网格中选择一行来创建网格？我有一个使用本地数据填充的父网格，只需单击“添加新记录”，就会创建一个选项卡网格。当我在子网格中选择一行，然后单击“更新”时，数据必须绑定到父网格。我可以检索所选元素，但无法绑定到父网格网格数据源。请提供相同的建议Jquery 通过使用剑道在子网格中选择一行，将记录添加到父网格,jquery,kendo-ui,kendo-grid,Jquery,Kendo Ui,Kendo Grid,我如何更新主服务器（父服务器）通过使用kendo ui在子网格中选择一行来创建网格？我有一个使用本地数据填充的父网格，只需单击“添加新记录”，就会创建一个选项卡网格。当我在子网格中选择一行，然后单击“更新”时，数据必须绑定到父网格。我可以检索所选元素，但无法绑定到父网格网格数据源。请提供相同的建议 <!DOCTYPE html> <html> <head> <title>Popup editing</titl
<!DOCTYPE html>
<html>
<head>
<title>Popup editing</title>
<meta charset="utf-8">
<link href="css/examples-offline.css" rel="stylesheet">
<link href="css/kendo.common.min.css" rel="stylesheet">
<link href="css/kendo.rtl.min.css" rel="stylesheet">
<link href="css/kendo.default.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.web.min.js"></script>
<script src="../js/userMaintenance.js"></script>
<script src="../js/console.js"></script>
<script>
</script>
</head>
<body>
<center><h2 style="color:blue;">User Maintenance</h2> </center>
<!-- grid element -->
<div id="example" class="k-content">
<div id="grid" ></div>
<script>
var data = createRandomData(50);
var main = [{Globalid:"fdsdf",UserName:"System Admin",SystemRole:"5",Title:"5"},
{Globalid:"qwewqeqwe",UserName:"System Admin",SystemRole:"5",Title:"5"}
];
var mylocaldatasource=new kendo.data.DataSource({
data:main
});
mylocaldatasource.read();
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
Globalid: { type: "string" },
UserName: { type: "string" },
SystemRole: { type: "string" },
Title: { type: "string" }
}
}
}
},
height: 430,
pageable: false,
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
toolbar: ["create"],
columns: [
{
field: "Globalid",
title: "Global id"
},
{
field: "UserName",
title: "User Name"
},
{
field: "SystemRole",
title: "System Role"
},
{
field: "Title",
title: "Title",
format: "{0:c}",
width: "100px"
},
{
command: ["edit", "Remove"],
title: " ",
width: "160px"
}
],
edit: function(e){
e.container.find(".nested-tabstrip").kendoTabStrip({});
e.container.find(".tabstrip-grid").kendoGrid({
dataSource: mylocaldatasource,
pageable: false,
selectable:true,
height: 300,
columns:[
{
field: "Globalid",
title: "Global id"
},
{
field: "UserName",
title: "User Name"
},
{
field: "SystemRole",
title: "System Role"
},
{
field: "Title",
title: "Title",
format: "{0:c}",
width: "100px"
}
],
change:grid_change
});
}
});
function grid_change(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
// var globalid=this.dataItem(this.select()).Globalid;
alert(this.dataItem(this.select()).Globalid);
}
// selectedDataItems contains all selected data items
}
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
grid.dataSource.add({
id:i+1,
Globalid: this.dataItem(this.select()).Globalid,
UserName: selectedDataItems.UserName,
SystemRole: selectedDataItems.SystemRole,
Title: selectedDataItems.Title
});
});
</script>
</div>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<div class="nested-tabstrip">
<ul>
<li>
Search
</li>
<li>
Search Results
</li>
</ul>
<div>
<div class="Search">
<div class="k-edit-label">
<label for="Globalid">Global id:</label>
</div>
<div class="k-edit-field">
<input type="text" class="k-input k-textbox" name="Globalid" data-bind="value:Globalid">
</div>
<div class="k-edit-label">
<label for="UserName">User Name: </label>
</div>
<div class="k-edit-field">
<input name="UserName"
data-bind="value:UserName"
data-value-field="UserName"
/>
</div>
<div class="k-edit-label">System Role: </div>
<div class="k-edit-field">
<select name="SystemRole" >
<option value="PAA User">PAA User</option>
<option value="PAA Admin">PAA Admin</option>
<option value="Executive">Executive</option>
<option value="System Admin">System Admin</option>
</select>
</div>
<div class="k-edit-label">
<label for="Title">Title:</label>
</div>
<div class="k-edit-field">
<input type="text" name="Title" data-bind="value:Title" />
</div>
</div>
</div>
<div>
<div class="tabstrip-grid" id="childgrid"></div>
</div>
</div>
</body>
</html>
弹出式编辑
用户维护
var数据=createRandomData（50）；
var main=[{Globalid:“fdsdf”，用户名：“系统管理员”，系统角色：“5”，标题：“5”}，
{Globalid:“qwewqeqwe”，用户名：“系统管理员”，系统角色：“5”，标题：“5”}
];
var mylocaldatasource=new kendo.data.DataSource({
数据：主要
});
mylocaldatasource.read（）；
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
数据：数据，
模式：{
型号：{
字段：{
Globalid:{type:“string”}，
用户名：{type:“string”}，
SystemRole:{type:“string”}，
标题：{type:“string”}
}
}
}
},
身高：430，
可分页：false，
可编辑：{
模式：“弹出”，
模板：kendo.template（$（“#弹出编辑器”）.html（）
},
工具栏：[“创建”]，
栏目：[
{
字段：“Globalid”，
标题：“全局id”
},
{
字段：“用户名”，
标题：“用户名”
},
{
字段：“系统角色”，
标题：“系统角色”
},
{
字段：“标题”，
标题：“标题”，
格式：“{0:c}”，
宽度：“100px”
},
{
命令：[“编辑”、“删除”]，
标题：“，
宽度：“160像素”
}
],
编辑：功能（e）{
e、 container.find（“.nested tabstrip”）.kendoTabStrip（{}）；
e、 container.find（“.tabstrip grid”）.kendoGrid({
数据源：mylocaldatasource，
可分页：false，
是的，
身高：300，
栏目：[
{
字段：“Globalid”，
标题：“全局id”
},
{
字段：“用户名”，
标题：“用户名”
},
{
字段：“系统角色”，
标题：“系统角色”
},
{
字段：“标题”，
标题：“标题”，
格式：“{0:c}”，
宽度：“100px”
}
],
更改：网格更改
});
}
});
功能网格变更（e）{
var selectedRows=this.select（）；
var selectedDataItems=[]；
for（var i=0；i
搜寻
搜索结果
全局id:
用户名：
系统角色：
PAA用户
PAA管理员
总经理
系统管理员
标题：
$("#ChildGrid tbody tr").on("click", function (e) {
var grid = $("#ChildGrid").data("kendoGrid");
var dataItem = grid.dataItem(grid.select())
window.parent.CallFromChild(dataItem);
});
function CallFromChild(dataItemFromChild){
var parentGrid = $("#ParentGrid").data("kendoGrid");
var parentDataItem = parentGrid.dataItem.set("ColumnName",dataItemFromChild.Value);
}
你可以试试这样的。希望这有帮助。感谢您的输入，但这似乎不起作用，可能是因为子网格是一个选项卡网格，事实上它出现在弹出窗口中。您能创建一个小提琴示例吗？