JS解析JSON生成界面2

/*
  解析JSON生成UI
  BEGIN
*/
g_index = 0;
function append_new_row(buttonid,tableid)
{

    jQuery("#"+buttonid).click(
function(){
         tr = append_row(null,++g_index,tableid);
         jQuery("#"+tableid).append(tr);    
    });
}

function get_one_field(index)
{
    fieldName = jQuery("#fieldName"+index);
if(fieldName != null && fieldName != undefined)
    {
        fieldType = jQuery("#fieldType"+index);
        allowNull = jQuery("#allowNull"+index);
//maxlength = jQuery("#maxlength"+index);
        displayName = jQuery("#displayName"+index);

if(fieldName.val() == null || 
            fieldName.val()==undefined || 
                fieldName.val().length ==0)
return "";

        s = "{'fieldName':'"+fieldName.val()+"',";
        s = s + "'fieldType':'"+fieldType.val()+"',";
if (allowNull.attr("checked") == 'checked')
            s = s +    "'allowNull':"+true+",";
else
            s = s +    "'allowNull':"+false+",";
//s = s + "'maxlength':"+maxlength.val()+"}"
        s = s + "'displayName':'"+displayName.val()+"'}"
return s;

    }
return "";
}


function get_fields() 
{
    result = "";
for(var i=1;i<=g_index;i++)
    {
        s = get_one_field(i);
if (s.length >0)
            result = result.length > 0 ? result  +"," + s : s;
    }

if(result.length >0)
        result = "["+result+"]";

return result;
}

function post_dynamic_data(buttonid,taleid)
{
//table = jQuery("#"+tableid);
    jQuery("#"+buttonid).unbind("click");
    jQuery("#"+buttonid).click(function()
    {
        s = get_fields();
        jQuery.ajax({
        type : "post",
        url : "/pj/sex",
        cache : false,
        dataType : "text",
        data : {
            pi : jQuery("#project_id").val(),
            ex : s,
        },
        success : function(data) {
            alert(data);
        },
        error : function(xhr, ajaxOptions, error) {
                alert(error)
            }
        });
    });
}

function append_row (field,index,tableid)
{
    tr = jQuery("<tr></tr>");
    td1 = jQuery("<td></td>");
    td2 = jQuery("<td></td>");
    td3 = jQuery("<td></td>");
    td4 = jQuery("<td></td>");
    td5 = jQuery("<td></td>");    
    tr.attr("id","tr"+index).data("load",false);

var label1 = jQuery("<label></label>");
var textbox1 = jQuery("<input />");
    label1.text("字段名:");
    textbox1.attr("id","fieldName"+index).attr("name","fieldName"+index).attr("type","text").attr("size",15);
    td1.append(label1).append(textbox1);

var label2 = jQuery("<label></label>");
var select2 = jQuery("<select></select>");
var select2_option1 = jQuery("<option></option>");
var select2_option2 = jQuery("<option></option>");
    label2.text("字段类型:")
    select2.attr("id","fieldType"+index).attr("name","fieldType"+index);
    select2_option1.text("文本").val("text");
    select2_option2.text("布尔").val("bool");
    select2.append(label2).append(select2_option1).append(select2_option2);
    td2.append(label2).append(select2);


var label3 = jQuery("<label></label>");
var checkbox3 = jQuery("<input />");
    label3.text("是否允许为空:");
    checkbox3.attr("id","allowNull"+index).attr("name","allowNull"+index).attr("type","checkbox");
    td3.append(label3).append(checkbox3);

//var label4 = jQuery("<label></label>");
    //var textbox4 = jQuery("<input />");
    //label4.text("最大长度:");
    //textbox4.attr("id","maxlength"+index).attr("name","maxlength"+index).attr("type","textbox").attr("size",5);
    //td4.append(label4).append(textbox4);


var label4 = jQuery("<label></label>");
var textbox4 = jQuery("<input />");
    label4.text("显示名:");
    textbox4.attr("id","displayName"+index).attr("name","displayName"+index).attr("type","textbox").attr("size",15);
    td4.append(label4).append(textbox4);    


var link5 = jQuery("<a></a>");
    link5.attr("id","delete"+index).text("删除")
    td5.append(link5);
    link5.unbind("click");
    link5.click(
function()
    {
//alert($(this).parent().parent().data("load"));
        if($(this).parent().parent().data("load")==false)
        {
            $(this).parent().parent().remove();
        }
else
        {
            choice = window.confirm("删除该字段会影响项目所有用户，您确认吗？");
if(choice)
            {
                $(this).parent().parent().remove();
            }
        }
    });

if(field != null)
    {
        textbox1.val(field.fieldName);
        textbox1.attr("readonly","readonly");
        select2.val(field.fieldType);
        select2.attr("readonly","readonly");
        checkbox3.attr("checked",field.allowNull);
        checkbox3.attr("readonly","readonly");
//textbox4.val(field.maxlength);
        textbox4.val(field.displayName);
        textbox4.attr("readonly","readonly");
        tr.data("load",true).data("tableid",tableid);
    }

    tr.append(td1).append(td2).append(td3).append(td4).append(td5);
return tr;
}

function get_exfields_from_server()
{
    s = jQuery("#project_ex_fields").val();
//alert(s);
    load_extend_fields(s,"tfields");
}

function load_extend_fields(data,tableid)
{
//数据打桩
    //data = "[{'fieldName':'companyName','fieldType':'bool','allowNull':false,'maxlength':10},{'fieldName':'phone','fieldType':'text','allowNull':true,'maxlength':20}]"
    if (data != null && data.length>0)
    {
        data = eval(data);
        table = jQuery("#"+tableid);

for(var i=0;i<data.length;i++)
        {
            tr = null;
            field = data[i];
            tr = append_row(field,i+1,tableid);
            table.append(tr);
        }
        g_index = data.length;
    }


    append_new_row("append_field",tableid);
    post_dynamic_data("ex_submit",tableid);
}

/*
    END 
*/

转载于:https://www.cnblogs.com/code-style/archive/2012/01/16/2323502.html