完成一个一对多关系的数据输入窗口，单选删除还有问题，待改进

最新推荐文章于 2022-09-04 16:32:35 发布

JaconKing

最新推荐文章于 2022-09-04 16:32:35 发布

阅读量408

点赞数

分类专栏： web前端的页面开发文章标签：二维数组 metadata js

本文链接：https://blog.csdn.net/JaconKing/article/details/46496105

版权

web前端的页面开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

<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>
<button id="doDelete" οnclick="doDelete()">doDelete</button><br/>

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

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

</div>

<input type="hidden" id="title_id">
<input type="hidden" id="content_count">
<input type="text" id="deletData">
</div>

</div>

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

<script>
//设置弹出框
function addTitle(){
addDatas();
//alert($("#aTitle").html());
var id = $("#title_id").val();
if(id ==""){
id = 1;
}else{
id++;
}

$("#Title").append("<input οnclick='showData(this),deleteReady(this)' class='titles' id='title_"+id+"' value='title_"+id+"'/>");

$("#title_id").val(id);
var count = 0;
$("#content_count").val(count);
addContent();

}
function addContent(){
//alert("addContent");
var id = $("#title_id").val();
var count = $("#content_count").val();
if(count==""){
count = 1;
}else{
count++;
}
if(id!=""){

$("#Content").append("<input οnclick='deleteReady(this)' class='contents' id='title_"+id+"#"+count+"' value='title_"+id+"#"+count+"'/>");

$("#content_count").val(count);
}

}

//存放MetaData数据的二维数组,存放的数据格式如下
//metaDatas[data[title,contents[]]]

var MetaDatas = new Array();
function addDatas(){
//alert(obj.id);

//存放详细数据的二维数组,
//dataDetail[0]存放title，
//dataDetail[1]存放一个一维数组contents，
//contents中存放的是该title对应的所有content

var orgId = $("#Content input:text").attr("id");
var flag = true;

if(orgId!=""&& typeof(orgId) != "undefined"){//判断orgId既不为空也不为undefined

var ids = orgId.split("#");
//取得title的id
var id = ids[0];

for(var i=0 ;i<MetaDatas.length; i++){
var dataDetail = MetaDatas[i];
var title = dataDetail[0];

if(id == title){
//alert("旧数据");
flag = false;
//判断metaDatas数组中是否有该title对应的项，有则进入，然后将其中的
//dataDetail[]中的数据进行更新。
//var contents = dataDetail[1];

/** for(var x=0;x<dataDetail[1].length;x++){
var count = x+1;
var content_id=id+"#"+count;
var data = $("#Content input:text[id="+content_id+"]").val();
//alert("old:"+dataDetail[1][x]+" new:"+data);
contents[x] = data;
//alert("交换数据后："+dataDetail[1][x]);
}
*/
var contents = new Array();
//var x=0;
var count = 1;
var content_id
var data ;
while(true){

content_id = id+"#"+count;
data = $("#Content input:text[id="+content_id+"]").val();
//alert(content_id+" "+ data);
//alert("old:"+dataDetail[1][x]+" new:"+data);
if(data == ""||typeof(data) == "undefined"){
break;
}else{
contents[count-1] = data;
count++;
}

//alert("交换数据后："+dataDetail[1][x]);
}
dataDetail[1] = contents;
MetaDatas[i] = dataDetail;
//MetaDatas.splice(i,1,dataDetail);
}
}
//如果是新的数据，则再往metaDatas中新增
if(flag){
//alert("新数据");
var dataDetail = new Array();
var contents = new Array();
dataDetail[0] = id;
var count = $("#content_count").val();
//alert(count);
for(var i=1;i<=count;i++){
var content_id=id+"#"+i;
var data = $("#Content input:text[id="+content_id+"]").val();
contents[i-1] = data;
}
dataDetail[1] = contents;
MetaDatas.push(dataDetail);
}
$("#Content").empty();
}

}

function showData(obj){
addDatas();
var id = obj.id;
if(typeof(id) == "undefined"){
id = obj;
}
var con;
//alert(MetaDatas.length);
for(var i=0 ;i<MetaDatas.length; i++){

var dataDetail = MetaDatas[i];
var title = dataDetail[0];

if(id == title){
con = dataDetail[1].length;
for(var x=0;x<dataDetail[1].length;x++){
var count = x+1;

var content = dataDetail[1][x];
$("#Content").append("<input οnclick='deleteReady(this)' class='contents' id='"+id+"#"+count+"' value='"+content+"'/><br/>");
}
}
}
var idnum = id.split("_");
$("#title_id").val(idnum[1]);
$("#content_count").val(con);
}
function deleteReady(obj){
$("#deletData").val(obj.id);
}

function doDelete(){
//MetaDatas = new Array();
//alert(MetaDatas.length);
var id = $("#deletData").val();
var index = id.indexOf("#");
//用来获得该title对应的对象id
var titleId;
//index ==-1，说明删除的是该title对应的全部content
if(index ==-1){

titleId = id;

for(var i=0 ;i<MetaDatas.length; i++){

var dataDetail = MetaDatas[i];

var title = dataDetail[0];

if(id == title){

MetaDatas.splice(i,1);
//alert("MetaDatas: "+MetaDatas[i]+" length:"+MetaDatas.length);
break;
}
}
}
//index !=-1，说明是删除选中的某一个content
else {
var datas = id.split("#");
titleId = datas[0];
for(var i=0 ;i<MetaDatas.length; i++){

var dataDetail = MetaDatas[i];
var title = dataDetail[0];

if(datas[0] == title){
var contents = dataDetail[1];
contents.splice(datas[1],1);
//alert("contents: "+contents+" length:"+MetaDatas.length);
break;
}
}
}
$("#deletData").val("");
$("#Content").empty();
showData(titleId);
}

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();
});
//给弹出框中增加列

</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;
}

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