增加元数据的未完成页面-CSDN博客

本文链接：https://blog.csdn.net/wtmdcnm/article/details/46404803

<!DOCTYPE html>
<html>
<head>
<title>Customizing actions</title>

<link href="content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="content/shared/js/console.js"></script>
<script>

</script>


</head>
<body>

<a class="offline-button" href="../index.html">Back</a>


<div id="example" class="k-content">
<div id="window" style="display:none">
<div >


<button id="addTitle" οnclick="addTitle()">addTitle</button>
<button id="addContent" οnclick="addContent()">addContent</button><br/>

<div style="float:left; width:100px; height:100px; background:#333" id="Title">
</div>

<div style="float:left; width:100px; height:100px; background:#333" id="Content">

</div>
</div>

</div>

<span id="undo" style="display:true" class="k-button">Click here to open the window.</span>

<script>
//设置弹出框
function addTitle(){
//alert($("#aTitle").html());
$("#Title").append("<input class='titles' id='aaa' value='xxxxx'/>");
$("#Content").append("<input class='contents' id='aaa' value='bbbbbb'/><br/>");

}
function addContent(){
//alert("addContent");
var width=$("#aaa").width();
width=width+5;
//alert(width);
//$("#Content").append("<input id='aaa' value='bbbbbb' style='margin-left:"+width+"'/><br/>");
$("#Content").append("<input id='aaa' value='bbbbbb'/><br/>");
}
function onOpen(e) {
kendoConsole.log("event :: open");
}

function onClose(e) {
$("#undo").show();
kendoConsole.log("event :: close");
}

function onActivate(e) {
kendoConsole.log("event :: activate");
}

function onDeactivate(e) {
kendoConsole.log("event :: deactivate");
}

function onRefresh(e) {
kendoConsole.log("event :: refresh");
}

function onResize(e) {
kendoConsole.log("event :: resize");
}

function onDragStart(e) {
kendoConsole.log("event :: dragstart");
}

function onDragEnd(e) {
kendoConsole.log("event :: dragend");
}
function openDialog(){
if (!$("#window").data("kendoWindow")) {
$("#window").kendoWindow({
width: "630px",
height: "315px",
title: "增加元数据",
actions: ["Refresh", "Close"],
content: "../../content/web/window/ajax/ajaxContent1.html",
visible: false,
open: onOpen,
activate: onActivate,
close: onClose,
deactivate: onDeactivate,

refresh: onRefresh,

resize: onResize,
dragstart: onDragStart,
dragend: onDragEnd
}).data("kendoWindow").open();
}
}
$("#undo")
.bind("click", function() {
openDialog();
$("#window").data("kendoWindow").open().center();;
// $("#undo").open();
});
//给弹出框中增加列

/*
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: false } },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});

$("#addContent")
.bind("click", function() {
alert("addContent");
});

$("#gridTitle").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 430,
toolbar: ["add", "save", "cancel","addContent"],
columns: [

{ field: "ProductName", title: "Product Name", width: 110 },
{ command: "destroy", title: " ", width: 90 }],
editable: true
});
*/

</script>

<style scoped>
#example {
min-height:400px;
}

#undo {
text-align: center;
position: absolute;
white-space: nowrap;
border-width: 1px;
border-style: solid;
padding: 2em;
cursor: pointer;
}

/**
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 430,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
});
});

function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: false,
serverSorting: false,
serverFiltering: false,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},

columns: [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
});
}
*/

</style>
</div>
<br/>
<div class="console"></div>
</body>
</html>