## 栏目名称点击后变成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>&nbsp;&nbsp;&nbsp;&nbsp;├─ <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('操作错误!'); } }