2. 程式人生 > >jqery easyui 利用treeview實現選單的增刪改查

jqery easyui 利用treeview實現選單的增刪改查

阿新 • • 發佈：2019-02-07
$(function () { //function onEndEdit(index, row) { // debugger; // var ed = $(this).datagrid('getEditor', { // index: index, // field: 'IsEnable' // }); // debugger; // row.IsEnable = $(ed.target).checkbox('getChecked');
// row.IsOpen = true; // //row.productname = $(ed.target).combobox('getText'); //}; $('#tg').treegrid({ url: '/Menu/GetNavgitionData', idField: 'BaseId', treeField: 'Name', iconCls: 'icon-ok', state: 'closed', rownumbers: true
, //行號 animate: true, //點選節點的動畫效果 collapsible: true,//定義是否可摺疊按鈕 fitColumns: true, // 置為true將自動使列適應表格寬度以防止出現水平滾動。 showFooter: true,//定義是否顯示行底（如果是做統計表格，這裡可以顯示總計等）。 striped: false,//設定為true將交替顯示行背景。 onDblClickRow: function (row) { edit() },//雙擊節點是觸發
//onClickRow: function (row) { save() },//點選節點時觸發 columns: [[ { field: 'Name', title: '模組名稱', editor: 'text', width: 180 }, { field: 'Domain', title: '導航領域', editor: 'text', width: 150 }, { field: 'Path', title: '跳轉路徑', editor: 'text', width: 200 }, { field: 'Sequence', title: '排序序號', editor: 'text', width: 100 }, { field: 'Parent', title: '上級選單', width: 100, formatter: function (value, row, index) { if (value != null) return value.Name; }, { field: 'IsEnable', title: '是否啟用', width: 60, formatter: function (value, row, index) { if (value == true || value == 'true') { var d = '<input type="checkbox" checked="checked" class="zhen" disabled="disabled" />&nbsp;&nbsp;'; row.IsEnable = 'true'; //此處如果不裝換為字串型別，下面的編輯器將不會有預設值 } else { var d = '<input type="checkbox" disabled="disabled" />&nbsp;&nbsp;'; row.IsEnable = 'false'; } return d; }, editor: { //編輯器 type: 'checkbox', options: { on: true, off: false, //此出實際返回字串型別 } } }, { field: 'IsOpen', title: '是否公開', width: 60, formatter: function (value, row, index) { //alert(rec.isPresent); if (value == true) { var d = '<input type="checkbox" checked="checked" name="IsOpen"/>&nbsp;&nbsp;'; row.IsOpen = 'true'; } else { var d = '<input type="checkbox" name="IsOpen"/>&nbsp;&nbsp;'; row.IsOpen = 'false'; } return d; }, editor: { //編輯器 type: 'checkbox', options: { on: true, off: false, //此出實際返回字串型別 } } } ]], toolbar: [ { text: '新增根選單', iconCls: 'icon-add', handler: function () { appendroot(); } }, '-', { text: '新增子選單', iconCls: 'icon-add', handler: function () { append(); } }, '-', { text: '刪除', iconCls: 'icon-remove', handler: function () { remove(); } }, '-', { text: '編輯', iconCls: 'icon-edit', handler: function () { edit(); } }, '-', { text: '儲存', iconCls: 'icon-save', handler: function () { save(); } }, '-', { text: '取消編輯', iconCls: 'icon-undo', handler: function () { $('#tg').treegrid('cancelEdit', editingId); editingId = undefined; } }, '-', { text: '全部摺疊', iconCls: 'icon-fold', handler: function () { $('#tg').treegrid('collapseAll'); } }, '-', { text: '全部展開', iconCls: 'icon-unfold', handler: function () { $('#tg').treegrid('expandAll'); } }, ], } ); }) var editingId; function IsEditingId() { if (editingId) { $('#tg').treegrid('endEdit', editingId); editingId = undefined; } } function edit() { debugger; if (undefined != editingId) { utils.message('error', '請先儲存當前節點！'); return; } var row = $('#tg').treegrid('getSelected'); if (undefined == row) { utils.message('error', '請選中一個節點！'); } if (row) { editingId = row.BaseId; $('#tg').treegrid('beginEdit', editingId); } } function save() { if (editingId != undefined) { editId = editingId; $('#tg').treegrid('endEdit', editingId); utils.message('confirm', '確認儲存當前操作嗎？', function (b) { if (b) { var row = $('#tg').treegrid('find', editingId); if (row.IsEnable == 'false') { row.IsEnable == false } if (row.IsEnable == 'true') { row.IsEnable = true } if (row.IsOpen == 'true') { row.IsOpen = true; } if (row.IsOpen == 'false') { row.IsOpen = false; } var node = { BaseId: row.BaseId, Domain: row.Domain, Name: row.Name, Path: row.Path, ParentId: row._parentId, Sequence: row.Sequence, IsEnable: row.IsEnable, IsOpen: row.IsOpen }; var data; $.ajax({ type: "post", async: false, data: node, url: '/Menu/SaveNewNode', success: function (res) { data = res; } }); if (data == 'success') { utils.message('success', '儲存成功！'); $('#tg').treegrid('refresh', editingId); $('#tg').treegrid('acceptChanges'); } else { utils.message('error', data); $('#tg').treegrid('rejectChanges'); $('#tg').treegrid('refresh', editingId); //$('#tg').treegrid('remove', editingId); // $('#tg').treegrid('cancelEdit', editingId); //$('#tg').treegrid('rejectChanges'); editingId = undefined; return; } editingId = undefined; } } ) } } function appendroot() { debugger; $('#tg').treegrid('append', { parent: null, // 節點有一個'id'值,定義是通過'idField'屬性 data: [{ BaseId: guid(), Name: '', Path: '', Parent: null, IsEnable: false, IsOpen: false, }] }); //$('#tg').treegrid('expand', node.BaseId); $('#tg').treegrid('select', editingId); $('#tg').treegrid('beginEdit', editingId); } function append() { if (undefined != editingId) { utils.message('error', '請先儲存當前節點！'); return; } var node = $('#tg').treegrid('getSelected'); if (!node) { utils.message('error', '請選擇節點！'); return; } $('#tg').treegrid('append', { parent: node.BaseId, // 節點有一個'id'值,定義是通過'idField'屬性 data: [{ BaseId: guid(), Name: '', Path: '', Parent: node, IsEnable: false, IsOpen: false, }] }); $('#tg').treegrid('expand', node.BaseId); $('#tg').treegrid('select', editingId); $('#tg').treegrid('beginEdit', editingId); } function remove() { var node = $('#tg').treegrid('getSelected'); if (undefined != editingId) { if (editingId != node.BaseId) { utils.message('error', '請先儲存當前節點！'); return; } } if (null == node) { utils.message('error', '請選擇要刪除的節點！'); return; } var id = node.BaseId; utils.message('confirm', '確認刪除嗎？', function (b) { if (b) { $('#tg').treegrid('endEdit', id); $.post('/Menu/DeleteNode', { id: id }, function (data) { if (data == 'error') { utils.message('error', '刪除失敗！'); $('#tg').treegrid('rejectChanges'); } if (data == 'success') { $('#tg').treegrid('remove', node.BaseId); utils.message('success', '刪除成功！'); editingId = undefined; // $('#tg').treegrid('reload', id); $('#tg').treegrid('acceptChanges'); } }); } }); } //表示全域性唯一識別符號 (GUID)。 因為操作選單需要id 所以要自己生成id 來儲存到資料庫 function guid() { function S4() { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); } editingId = (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()); return editingId; }

相關推薦

jqery easyui 利用treeview實現選單的增刪改查

$(function () { //function onEndEdit(index, row) { // debugger; // var ed = $(this).datagrid('getEditor', {

JqueryEasyUI實現CRUD增刪改查操作

per queryall call .get field string cal upd wid 1.代碼介紹： 前端界面由jsp,JqueryEasyUI制作，後臺代碼由Servlet實現邏輯操作 註：JqueryEasyUI的庫文件和其他自己jar包自己導入。Jquery

Java操作數據庫實現"增刪改查"

mysq 新的 rom 可用 erp catch next() value eight 本文主要講解JDBC操作數據庫 主要實現對MySql數據庫的"增刪改查" 綜合概述: JDBC的常用類和接口 一 DriverManager類 DriverManage類用

利用sql語句進行增刪改查

1.查詢 　　函式：raw(sql語句) 　　語法：Entry.objects.raw(sql) 　　返回：QuerySet 2.增刪改 　　from django.db import connection 　　def doSQL(request): 　　　　with connection.curso()

java實現elasticsearch增刪改查方法

這篇文章旨在是幫助新接觸elasticsearch的同學快速上手es，儘早的為團隊貢獻自己的力量。 （一）往es中增加資料 import org.elasticsearch.client.Client; import org.elasticsearch.client.transport.

nodejs+mysql+Express+vue+layui+html實現的增刪改查

學習nodejs已經有一段時間了由於一些事情一直沒有寫 1.首先使用idea新建一個專案     2、建立的專案目錄如下圖所示     3.開啟app.js，找到模版引擎設定並進行修改  修改為如下程

Web介面實現資料庫增刪改查過程

實現方法：JSP+Servlet+JavaBean 基本實現思想：jsp檔案為顯示介面，包括增刪改查四個介面，然後使用form或者href超連結的方法將網頁獲得的值傳到Servlet中的方法裡；而servlet方法中呼叫dao層裡面的包括增刪改查等方法的物件，以此實現對資料庫裡面的資料的增刪改查，最後返回頁

EF三層構架+介面實現（增刪改查）

DbContext   DbContext是EntityFramework很重要的部分，連線域模型與資料庫的橋樑，是與資料庫通訊的主要類。   DbContext主要負責以下活動： EntitySet:：DbContext包含了所有對映到表的entities

Mybatis 學習筆記——原生DAO實現資料增刪改查

一、開發環境 JDK java version “1.8.0_171” Java™ SE Runtime Environment (build 1.8.0_171-b11) Java HotSpot™ 64-Bit Server VM (build 25.1

Mybatis 學習筆記（三）——使用Mapper代理的方式實現資料增刪改查

一、介紹   Mapper代理的方式只需要程式設計師編寫 Mapper.xml 檔案及 Mapper介面。   本文是基於上一篇文章：Mybatis 學習筆記——原生DAO實現資料增刪改查，所以接下來的內容是以其為基礎的，如果有什麼不懂的請留言或檢視上一篇。所

JavaWeb 實現基礎增刪改查 CRUD

1.資料庫表如下 CREATE TABLE `employee` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(40) NOT NULL, `note` varchar(200) DEFAULT NULL,

MyBatis實現基礎增刪改查的功能

MyBatis編碼的三種思路 1. 實體類+對映檔案+基礎配置檔案+測試類 實體類 public class Users { private int id; private String name; private int age;//屬性的型別及屬性名

Node+Express+MySql實現簡單增刪改查和登入

var express = require('express'); var mysql = require('mysql'); var app = express(); var bodyParser = require('body-parser'); //連結資料庫 var connection = mys

Kotlin整合Spring Boot實現資料庫增刪改查(mybatis版)

前幾天由於工作需要，便開始學習了kotlin,java基礎紮實學起來也還算比較快，對於kotlin這個程式語言自然是比java有趣一些，因此就有了使用kotlin搭建基於spring boot的開發環境。這次先分享mybatis版本的 1 maven的pom檔案 <

Kotlin整合Spring Boot實現資料庫增刪改查(spring data jpa版)

接上次的kotlin整合spring boot的mybatis版本，這次分享的內容也很精彩，現在spring data jpa也慢慢流行起來了，因此學習kotlin的時候也順帶寫了spring data jpa版本的，下面就直接上程式碼分享給大家了 1 pom加入如下配置

mongoose建立資料結構，實現基本增刪改查功能

首先建議建立如下目錄結構的一個express專案目錄結構 --server --bin//這個檔案目錄是放置express專案啟動項檔案 --models//放置對應資料的結構 --public//前端頁面以及靜態資源 --routes//後端業務邏輯 --util//公

java 移動節點，排序號進行重新排序，以閉包形式實現ztree增刪改查操作，其中排序運用到此方法

package com.avic.custom.controller.ct; import java.util.HashMap; import java.util.Map; /** * 移動節點重新排序操作 * @author Administrator * */

c# 連線 mysql 以及實現簡易增刪改查

1.首先下載連線mysql需要的dll，任意門：http://pan.baidu.com/share/link?shareid=1024071329&uk=2442594409 2.本人選用的時2.0的； 3.然後在工程新增引用如下： 相關類： using M

JDBC實現簡單增刪改查

public class jdbcTest { /** * 建立表 */ public static void createTable() throws SQLException{ String sql = "CREATE TABLE IF NOT EXISTS `user`("

pymysql連線資料庫,實現資料庫增刪改查

1.資料庫連線 # 建立連線 def create_conn(): import pymysql conn = pymysql.connect( host='localhost', port=3306, user='root'