Kweb框架使用表单键值对的源码
幻冰小站 浏览次数:511 2020-08-18 14:49:07
function    auto_input_keyval(ele){
    var box = $Q(ele).parent();
    var incard;
    createItem = function(data){
    var itm = $Q.createElement('div');
    var itmn = $Q.createElement('div');
    var itmv = $Q.createElement('div');
    var itmc = $Q.createElement('div');
    var itmni = $Q.createElement('input');
    var itmvi = $Q.createElement('input');
    var itmeb = $Q.createElement('button');
    var itmdb = $Q.createElement('button');
    if(data){$Q(itmni).val(data[0]);$Q(itmvi).val(data[1]);}
    $Q(itmeb).attr('type','button');
    $Q(itmdb).attr('type','button');
    $Q(itmeb).text('插入');
    $Q(itmdb).text('删除');
    $Q(itmdb).click(function(){$Q(itm).remove();pushData();})
    $Q(itmeb).click(function(){
    var item = createItem();
    $Q(this).parent().parent().after(item);
    pushData();
    });
    $Q(itmni).keyup(function(){pushData();})
    $Q(itmvi).keyup(function(){pushData();})
    $Q(itm).append(itmn);
    $Q(itm).append(itmv);
    $Q(itm).append(itmc);
    $Q(itmn).append(itmni);
    $Q(itmv).append(itmvi);
    $Q(itmc).append(itmeb);
    $Q(itmc).append(itmdb);
    return itm;
    }
    addItem = function(data){
    $Q(incard.cardBody).append(createItem(data));
    pushData();
    }
    //将数据封装之后发送到input
    pushData = function(){
    //重新从input获取数据信息,然后将数据写入到
    var data = [];
    $Q(incard.cardBody).children().each(function(){
    var ths = this;
    if($Q(ths).find('input').item(0).val()){
    data.push([$Q(ths).find('input').item(0).val(),$Q(ths).find('input').item(1).val()]);
    }
    })
    $Q(ele).val($Q.json_encode(data));
    }
    //将input数据封装之后解析为样式
    pullData = function(){
    //将input的数据解析之后进行样式渲染
    var data = $Q(ele).val();
    data = $Q.json_decode(data);
    for(var i in data){
    addItem(data[i]);
    }
    }
    createUI = function(){
    incard = $Q.createElement('div');
    $Q(incard).attr('data-layout','keyval');
    incard.cardHead = $Q.createElement('div');
    $Q(incard.cardHead).attr('data-layout','keyval-head');
    incard.cardBody = $Q.createElement('div');
    $Q(incard.cardBody).attr('data-layout','keyval-body');
    incard.cardFoot = $Q.createElement('div');
    $Q(incard.cardFoot).attr('data-layout','keyval-foot');
    incard.addBtn = $Q.createElement('button');
    $Q(incard.addBtn).attr('type','button');
    $Q(incard.addBtn).text('增加字段');
    $Q(incard.addBtn).click(function(){addItem()})
    $Q(incard.cardFoot).append(incard.addBtn);
    $Q(incard).append(incard.cardHead);
    $Q(incard).append(incard.cardBody);
    $Q(incard).append(incard.cardFoot);
    $Q(box).append(incard);
    };
    createUI();//创建基础样板信息
    pullData();
    $Q(ele).hide();
}
上一篇: 三亚的亚龙湾
下一篇: GoAgent的安全风险