完成一个一对多关系的数据输入窗口，单选删除还有问题，待改进
2015-06-14 23:16
260 查看
<!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 >
<!--
<div id="gridTitle"></div>
<div id="gridContent"></div>
-->
<button id="addTitle" onclick="addTitle()">addTitle</button>
<button id="addContent" onclick="addContent()">addContent</button>
<button id="doDelete" onclick="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 onclick='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 onclick='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 onclick='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>
<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 >
<!--
<div id="gridTitle"></div>
<div id="gridContent"></div>
-->
<button id="addTitle" onclick="addTitle()">addTitle</button>
<button id="addContent" onclick="addContent()">addContent</button>
<button id="doDelete" onclick="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 onclick='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 onclick='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 onclick='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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Spring学习——DI(依赖注入)
- 6.面向对象程序设计，代码提交
- 017旋转和缩放视图
- vijos1057
- SRM 661 #DIV2
- iOS开发笔记--CocoaPods详解_进阶篇
- 2015061404 - sourceforge
- DICOM：dcm4chee奇葩逻辑浅析之UID修改
- C语言数组与指针
- mysql_close()与mysql_free_result()的区别
- 【翻译自mos文章】11gR2 OUI 在 PREREQUISITE CHECKS 时 hang住
- C#学习笔记(三)
- LeetCode 100 Same Tree
- 在myql sqlserver里边怎么快速找到带有关键字的表
- 第一次冲刺--站立会议07
- iOS开发笔记--CocoaPods详解_使用篇
- 黑马程序员-------io流总结
- 硬件电路总结
- 自定义AuthorizeAttribute
- 20135313_exp5