## 栏目名称点击后变成input直接修改内容,鼠标离开后,用AJAX提交，更新数据
1. Controller： index方法找到 栏目树 categoryTree（起源）
> \app\portal\controller\AdminCategoryController.php
if (empty($keyword)) {
$categoryTree = $portalCategoryModel->adminCategoryTableTree();
$this->assign('category_tree', $categoryTree);
} else {
$categories = $portalCategoryModel->where('name', 'like', "%{$keyword}%")
->where('delete_time', 0)->select();
$this->assign('categories', $categories);
}
2. Model ： categoryTree 是调用这里的数据 adminCategoryTableTree() 需要修改里面的元素和添加方法
> \app\portal\model\PortalCategoryModel.php
if (empty($tpl)) {
$tpl = " <tr id='node-\$id' \$parent_id_node style='\$style' data-parent_id='\$parent_id' data-id='\$id'>
<td style='padding-left:20px;'><input type='checkbox' class='js-check' data-yid='js-check-y' data-xid='js-check-x' name='ids[]' value='\$id' data-parent_id='\$parent_id' data-id='\$id'></td>
<td><input name='list_orders[\$id]' type='text' size='3' value='\$list_order' class='input-order'></td>
<td>\$id</td>
<td>\$spacer <span id='\$id' onclick='chgval(this)'>\$name</span> <a href='\$url' target='_blank'>访问</a></td>
<td>\$description</td>
<td>\$status_text</td>
<td>\$str_action</td>
</tr>";
}
3. View 页面展示：
> \themes\admin_simpleboot3\portal\admin_category\index.html
<td> ├─ <span id="19" onclick="chgval(this)">公司新闻</span> <a href="http://your.com/list/19.html" target="_blank">访问</a></td>
4. 添加脚本 (点击方法和提交修改方法)
<script type="text/javascript">
function chgval(obj){
var val = obj.innerHTML;
var cs = obj.children;
var id = obj.id;
var f = false;
for(var i = 0;i<cs.length;i++){
var c = cs[i];
if(c.tagName == 'INPUT'){
f = true;
break;
}
}
if(!f){
obj.innerHTML = '';
var input = document.createElement("input");
input.name = "name";
input.value = val;
input.id = id;
input.onblur = function(){
if(input.value==''){
new noty({
text: '标题不能为空',
type: 'error',
layout: 'topCenter',
}).show();
return false;
}
changetable(this.id,input.value);
obj.innerHTML = this.value;
}
obj.appendChild(input);
}
}
function changetable(id,name){
var rurl = "{:url('AdminCategory/changeTable')}";
$.ajax({
url: rurl, type: "post", dataType: "json", data: {id: id,name:name },
success: function (data) {
// console.log(data.code);
if(data.code==1){
new noty({
text: data.msg,
type: 'success',
layout: 'topCenter',
}).show();
}
}
});
}
</script>
5. Controller： 添加 changeTable方法处理提交数据
> \app\portal\controller\AdminCategoryController.php
/**
* 更新数据
* @return [json] [description]
*/
public function changeTable(){
$id = $this->request->param('id');
$name = $this->request->param('name');
if ($id > 0) {
$portalCategoryModel = new PortalCategoryModel();
$portalCategoryModel->where('id', $id)->update(['name' => $name]);
$this->success("更新成功！");
} else {
$this->error('操作错误!');
}
}
