February 10, 2013
-
年廿九晚同年初一朝頭早就係整D咁既野=.=
唔錯唔錯，加深左jQuery DOM traversal 既實戰經驗＝＝
add完row同block之後，禁gen json，然後開console睇下result 呢個object
不過仲有少少問題，應該限制user如果揀not既話唔可以有多過一條expression起入<!DOCTYPE html>
<html>
<head>
<style>
td{
vertical-align: middle;
}
td.left{
border-left: solid 1px;
}
</style>
</head>
<body>
<input type = "button" value = 'genjson' onclick = 'genjson()' />
</body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var logic = ['and','or','not'];
var column = ['Column A','Column B','Column C'];
var operator = ['<','=','>'];
var value = [1,2,3];
function genRow(){
var row = '<span class = "exp expline"><select class = "col">';
for (var i = 0; i < column.length; i++){
row = row + '<option>' + column[i] + '</option>';
}
row = row + '</select><select class = "op">';
for (var i = 0; i < operator.length; i++){
row = row + '<option>' + operator[i] + '</option>';
}
row = row + '</select><select class = "value">';
for (var i = 0; i < value.length; i++){
row = row + '<option>' + value[i] + '</option>';
}
row = row + '<input type = "button" value = "remove row" onclick = "removeRow(this)"; />';
row = row + '</select><br /></span>';
return row;
}
function genLogic(){
var row = '<span><select class = "logic">';
for (var i = 0; i < logic.length; i++){
row = row + '<option>' + logic[i] + '</option>';
}
row = row + '</select><br /><input type = "button" value = "remove block" onclick = "removeBlock(this)"; /></span>';
return row;
}
function genAddRowBut(){
var but = '<input type = "button" value = "add row" onclick = "addRow(this)" />';
return but;
}
function genAddBlockBut(){
var but = '<input type = "button" value = "add block" onclick = "addBlock(this,true)" />';
return but;
}
function addRow(that){
$(genRow()).insertBefore(that);
}
function addBlock(that,flag){
if (flag) that = $(that).parent();
$(that).append('<table class="exp expblock"><tr><td>'+genLogic()+'</td><td class = "left">'+genRow()+genAddRowBut()+genAddBlockBut()+'</td></tr></table>');
}
function removeRow(that){
$(that).parent().remove();
}
function removeBlock(that){
$(that).closest('table').remove();
}
function genjson(){
$('span.expline').each(function(){$(this).attr('exp',genexp($(this)));});
var i = 0;
$('.expblock').each(function(){$(this).attr('order',i++)});
for (i--;i>=0;i--){
var current = $('.expblock[order='+i+']');
$(current).attr('exp',genblockexp(current));
}
result = jQuery.parseJSON($('.expblock[order="0"]').attr('exp'));
}
function genblockexp(self){
var counter = 0;
var expJSONlist = [];
var expObjlist = [];
var logic = $(self).find('.logic').first().val();
alert(logic);
var firstexp = $(self).find('.exp').first();
$(firstexp).siblings('.exp').andSelf().each(function(){
alert($(this).attr('exp'));
expJSONlist[counter] = $(this).attr('exp');
$(this).css('border','solid red');
expObjlist[counter] = jQuery.parseJSON($(this).attr('exp'));
counter++;
});
expObjlist[counter] = logic;
return JSON.stringify(expObjlist);
}
function genexp(self){
var col = $(self).children('.col').val();
var op = $(self).children('.op').val();
var value = $(self).children('.value').val();
var exp = {};
exp.col = col; exp.op = op; exp.value = value;
$(self).attr('exp',JSON.stringify(exp));}
(function(){
addBlock($('body'))
}());
</script>
</html>
Recent Comments