第一種,比較少的編輯用這種,直接在那塊內容上編輯,失去焦點即完成
前幾天做編輯框的時候,需要只修改一個狀態
//編輯角色
function editTr($this){
thatTd=$($this).parent().prev(); value=$.trim(thatTd.html()); str='<input type="text" id="editing" value="'+value+'">'; thatTd.html(str); thatTd.find('input').focus(); } //編輯完成 $(document).on('blur','#editing',function(){ value=$(this).val(); $(this).parent().html(value); layer.msg('編輯用戶角色完成',{icon:1,time:1000}) })
第二種,整行都可編輯的實現
模板文件:lists數組為已經存在的列;js文件處理比較多,就不全部拆出來放了,只放一個編輯的處理,添加就是組合一個字符串append過來,刪除直接獲取ID之后ajax刪除就好。
1 <tbody> 2 <volist name="lists" id="v"> 3 <tr> 4 <td>{$v.id}</td> 5 <td>{$v.name}</td> 6 <td>{$v.sort}</td> 7 <td><if condition="$v['default'] eq 1">YES<else />NO</if></td> 8 <td class="actiontd"><span class="action edit">編輯</span> <span class="action del">刪除</span></td> 9 </tr> 10 </volist> 11 <tr id="nowtr"> 12 <td id="swid"></td> 13 <td><input id="swname" type="text" placeholder="請填寫軟件名稱" /></td> 14 <td><input id="swsort" type="text" class="small" placeholder="排序" /></td> 15 <td> 16 <select id="swdefault"> 17 <option value="1">默認選中</option> 18 <option value="0">默認不選</option> 19 </select> 20 </td> 21 <td class=""><a class="btn btn-success" id="swadd">添加</a></td> 22 </tr> 23 </tbody>
1 $('table').on('click','span.edit,span.MJedit',function(){ 2 var pre=''; 3 var tdlist=$(this).parent().parent().find('td'); 4 if($(this).attr('class')=='action MJedit'){ 5 pre='MJ'; 6 } 7 $('#'+pre+'swid').html(tdlist.eq(0).html()); 8 $('#'+pre+'swname').val(tdlist.eq(1).html()); 9 $('#'+pre+'swsort').val(tdlist.eq(2).html()); 10 defaultx=($.trim(tdlist.eq(3).html())=='YES')?1:0; 11 $('#'+pre+'swdefault').val(defaultx); 12 typename=tdlist.eq(4).html(); 13 $("#MJtype option:contains('"+typename+"')").attr("selected",true); 14 $('#'+pre+'swadd').html('編輯'); 15 layer.msg('請在下面編輯'); 16 })//edit end
js文件on里選擇器有 span.edit,span.MJedit 是有兩處都會觸發編輯,之后通過attr('class')做稍微不同的處理,用pre變量區別。和此處關系不大,不用太在意。