Jquery EasyUI 開發實錄

来源:http://www.cnblogs.com/jiekzou/archive/2016/12/02/6125957.html
-Advertisement-
Play Games

有好幾年沒有用過EasyUI了，最近在外包做的一個項目中新增功能時，又用到了，本以為和按照以前那樣用就可以了，可當我真正用的時候，發現許多地方不一樣了，就連官網的文檔都更新了，最突出的就是不知道什麼時候起多了一個data-options屬性。 記得，在過去一直都是用js直接調用的，現在突然變成dat ...


有好幾年沒有用過EasyUI了，最近在外包做的一個項目中新增功能時，又用到了，本以為和按照以前那樣用就可以了，可當我真正用的時候，發現許多地方不一樣了，就連官網的文檔都更新了，最突出的就是不知道什麼時候起多了一個data-options屬性。

記得，在過去一直都是用js直接調用的，現在突然變成data-options了，而官網給的Demo實在是太過簡單，連url參數都是直接寫死的，這肯定無法滿足開發需求。沒辦法，只好先從官網過一下文檔，然後慢慢摸索。因為浪費了我許多寶貴的時間，所以打算記錄一下備忘用，也希望給大家參考。

站在使用者的角度而言，用這樣的UI框架其實沒什麼技術含量，就是一邊看文檔，一邊對著Demo改而已，要說難的地方，就是Demo不全，無法滿足部分日常需求。

沒有產品原型圖，界面都是我意淫出來的，大家不要吐槽。

datagrid

需求：能夠動態添加行、修改行、刪除行、分頁。

前臺頁面AddInvoice.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddInvoice.aspx.cs" Inherits="YYZB.WebsiteAdmin.YYZB.PZSSettlement.AddInvoice" Title="結算單發票" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/js/easyui/easyui.css" rel="stylesheet" />
    <link href="../../js/easyui/icon.css" rel="stylesheet" />
    <link href="/css/bootstrap-multiselect.css" rel="stylesheet" />
    <style type="text/css">
        .form-inline .form-control {
            display: inline-block;
        }

        label {
            text-align: right;
            cursor: pointer;
            font-weight: lighter;
        }

        span.red {
            padding-left: 5px;
            color: red;
        }

        .form-inline {
            padding: 5px 2px;
        }

        input.form-control {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .glyphicon-stop:before {
            content: "\e074";
        }

        #roletable {
            padding: 3%;
            font-size: 16px;
        }

            #roletable input[type="checkbox"] {
                margin-left: 20px;
                margin-right: 5px;
            }

        .newInput {
            width: 240px;
            display: inline-block;
        }

        .tdLeft {
            width: 80px;
            text-align: right;
        }
        .validatebox-text,.validatebox-invalid{height:20px;}
    </style>
    <!--引用腳本-->
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/easyui/jquery.easyui.min.js"></script>
    <script src="../../js/easyui/easyui-lang-zh_CN.js"></script>
    <script src="/js/jquery.datagrid.js"></script>
    <script src="/js/knockout/knockout-2.1.0.js"></script>
    <script src="/js/bootstrap-multiselect.js"></script>
    <script type="text/javascript">
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return "";
        }
        var _id;
        $(function () {
            _id = GetQueryString("id");
            parent.$("#bootstrapDialog .modal-footer").find("button").eq(1).hide();
            loaddatagrid();
        });
        var datagrid; //定義全局變數datagrid
        function loaddatagrid() {
            datagrid = $('#table').datagrid({
                url: encodeURI("/YYZB/Tools/SettlementApi.aspx?action=GetInvoiceListBySetId&id=" + _id +
                    "&pageindex=" + _pageindex + "&pagesize=" + _pagesize + "&" + Math.random()),
                columns: [[
    { field: 'Id', checkbox: true, width: 50, sortable: false },
    {
        field: 'InvoiceNo', title: '發票號', width: 160, sortable: true, editor: { type: 'validatebox', options: { required: true} }
    },
    { field: 'Remark', title: '備註', width: 240, sortable: true, editor: { type: 'validatebox' } }
                ]],
                toolbar: [{
                    iconCls: 'icon-add',
                    text: '添加',
                    handler: function () { append() }
                }, '-',
                {
                    iconCls: 'icon-remove',
                    text: '刪除',
                    handler: function () { removeit() }
                }, '-',
                {
                    iconCls: 'icon-save',
                    text: '保存',
                    handler: function () { accept() }
                }, '-',
                 {
                     text: '修改', iconCls: 'icon-edit', handler: function () {
                         edit();
                     }
                 } , '-',
                  {
                      text: '取消編輯', iconCls: 'icon-redo', handler: function () {
                          //取消當前編輯行把當前編輯行罷undefined回滾改變的數據,取消選擇的行
                          cancleEdit();
                      }
                  }, '-'],
                onReload: function () {
                    reload();
                },
                onAfterEdit: function (rowIndex, rowData, changes) {
                    //endEdit該方法觸發此事件
                    saveChange(rowData);
                    editRow = undefined;
                },
                onDblClickRow: function (rowIndex, rowData) {
                    //雙擊開啟編輯行
                    if (editRow != undefined) {
                        datagrid.datagrid("endEdit", editRow);
                    }
                    if (editRow == undefined) {
                        datagrid.datagrid("beginEdit", rowIndex);
                        editRow = rowIndex;
                    }
                },
                iconCls: 'icon-edit',
                singleSelect: true,
                pagination: true, //在 datagrid 的底部顯示分頁欄。  
                rownumbers: true, //顯示行號的列  
                remoteSort: false //定義是否從伺服器給數據排序。  
            });
        }

        var editRow = undefined; //定義全局變數：當前編輯的行
        function edit() {
            //修改時要獲取選擇到的行
            var rows = datagrid.datagrid("getSelections");
            //如果只選擇了一行則可以進行修改，否則不操作
            if (rows.length == 1) {
                //修改之前先關閉已經開啟的編輯行，當調用endEdit該方法時會觸發onAfterEdit事件
                if (editRow != undefined) {
                    datagrid.datagrid("endEdit", editRow);
                }
                //當無編輯行時
                if (editRow == undefined) {
                    //獲取到當前選擇行的下標
                    var index = datagrid.datagrid("getRowIndex", rows[0]);
                    //開啟編輯
                    datagrid.datagrid("beginEdit", index);
                    //把當前開啟編輯的行賦值給全局變數editRow
                    editRow = index;
                    //當開啟了當前選擇行的編輯狀態之後，
                    //應該取消當前列表的所有選擇行，要不然雙擊之後無法再選擇其他行進行編輯
                    datagrid.datagrid("unselectAll");
                }
            }
        }
        function cancleEdit() {
            editRow = undefined;
            datagrid.datagrid("rejectChanges");
            datagrid.datagrid("unselectAll");
        }
        function append() {
            //添加時先判斷是否有開啟編輯的行，如果有則把開戶編輯的那行結束編輯
            if (editRow != undefined) {
                datagrid.datagrid("endEdit", editRow);
            }
            //添加時如果沒有正在編輯的行，則在datagrid的第一行插入一行
            if (editRow == undefined) {
                datagrid.datagrid("insertRow", {
                    index: 0, // index start with 0
                    row: {
                    }
                });
                //將新插入的那一行開戶編輯狀態
                datagrid.datagrid("beginEdit", 0);
                //給當前編輯的行賦值
                editRow = 0;
            }
        }
        function removeit() {
            //刪除時先獲取選擇行
            var rows = datagrid.datagrid("getSelections");
            //選擇要刪除的行
            if (rows.length > 0) {
                var editIndex = $('#table').datagrid('getRows').length - 1;
                parent.$.fn.Confirm({
                    message: "確定要刪除嗎？",
                    callback: function () {
                        var ids = [];
                        for (var i = 0; i < rows.length; i++) {
                            ids.push(rows[i].Id);
                        }
                        //將選擇到的行存入數組並用,分隔轉換成字元串
                        $.post("/YYZB/Tools/SettlementApi.aspx?action=RemoveInvoiceByIds", { ids: ids.join(','), SettlementId: _id }, function (data) {
                            var Json = eval('(' + data + ')');
                            if (Json.ok) {
                                //$('#table').datagrid('deleteRow', editIndex);
                                $("#table").datagrid('reload');
                                parent.$("#table").datagrid('reload');
                                //parent.$.fn.Alert({
                                //    message: "刪除成功！",
                                //    timer: 0,
                                //    callback: function () {
                                //        parent.$("#table").datagrid('reload');
                                //       $("#table").datagrid('reload');
                                //        //parent.$("#bootstrapDialog").modal("hide");
                                //    }
                                //});
                            }
                            else {
                                parent.$.fn.Alert({
                                    message: "刪除失敗：" + Json.error,
                                    callback: function () { }
                                });
                            }
                        })
                    }
                });
            }
            else {
                $.fn.Alert({
                    message: "請選擇刪除項！"
                });
            }
        }
        function accept() {
            //保存時結束當前編輯的行，自動觸發onAfterEdit事件如果要與後臺交互可將數據通過Ajax提交後臺
            datagrid.datagrid("endEdit", editRow);
        }
        function saveChange(rowData) {
            var url = encodeURI("/YYZB/Tools/SettlementApi.aspx?action=InsertOrUpdateInvoice");
            var msg = (rowData.Id == undefined || rowData.Id == "") ? "添加" : "修改";
            $.post(url, { id: rowData.Id, InvoiceNo: rowData.InvoiceNo, Remark: rowData.Remark,SettlementId:_id }, function (data) {
                var Json = eval('(' + data + ')');
                if (Json.ok) {
                    parent.$("#table").datagrid('reload');
                    //parent.$.fn.Alert({
                    //    message: msg+"成功！",
                    //    timer: 0,
                    //    callback: function () {
                    //        parent.$("#table").datagrid('reload');
                    //        //parent.$("#bootstrapDialog").modal("hide");
                    //    }
                    //});
                }
                else {
                    parent.$.fn.Alert({
                        message: msg+"失敗：
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C#發送郵件異常：根據驗證過程,遠程證書無效
    今天在做發送郵件功能時，開始用qq郵箱和163郵箱都可以正常發送，後再改用我公司的郵箱和smtp時竟然報錯了。 異常提示 “根據驗證過程，遠程證書無效”，後來通過查詢資料解決該問題，上代碼： ...
  • ASP.NET Core File Providers
    "原文地址：FileProvider" By [Steve Smith][1] ASP.NET Core通過對File Providers的使用實現了對文件系統訪問的抽象。 [查看或下載示例代碼][2] File Provider 抽象 File Providers是文件系統之上的一層抽象。它的主要 ...
  • MVC視圖展現模式之移動佈局
    參考：http://www.cnblogs.com/dunitian/p/5218140.html 簡單點，直接上用法 新建MVC項目，在golbal.asax中添加如下代碼 新建一個view，增加iphone.cshtml為尾碼的文件 那麼如果user-agent中包含iphone，就會打開該頁面 ...
  • 兩年來的core折騰之路幾點總結，附上nginx啟用http2拿來即用的配置
    一年多沒更新博客園內容了，core已經發生了翻天覆地的變化，想起2014年這時候，我就開始了從當時還叫k的那套preview都不如的vnext搭建這套系統，陸陸續續它每一次升級，我也相應地折騰，大約4個月前，我開始把生產環境的一部分從 windows server 遷移到 centos 7 上，觀察... ...
  • 探索ASP.NET MVC5系列之~~~5.緩存篇（頁面緩存+二級緩存）
    其實任何資料裡面的任何知識點都無所謂，都是不重要的，重要的是學習方法，自行摸索的過程（不妥之處歡迎指正） 彙總：http://www.cnblogs.com/dunitian/p/4822808.html#mvc 本章Demo：https://github.com/dunitian/LoTCodeB ...
  • 用.net訪問電子樞紐信用中心的數據查詢服務
    電子樞紐全稱國家交通運輸物流公共信息平臺，主要提供物流及生產企業進行物流相關數據交換的標準和API。信用中心是電子樞紐眾多數據服務中的一個，提供物流參與者信用信息的上傳和查詢，包括運輸車輛、從業人員等。官方的示例和介紹大多以Java為主，.net的非常少，希望本文可以幫助.net開發人員快速掌握數據... ...
  • .Net Oauth2.0 第三方登錄開發（Facebook ,LinkedIn ）
    需求：OAuth2實現第三方網站授權並獲取其相關數據來實現登錄等功能 暫時支持Facebook ，LinkedIn ，基本大同小異，只是返回時的數據不同，需根據具體返回類型進行相應處理 1.OAuth2認證流程 OAuth2認證協議涉及3方（應用、用戶和服務方），加之流程較為繁瑣，實現命名不盡相同， ...
  • ADO.NET 核心對象簡介
    ADO.NET是.NET中一組用於和數據源進行交互的面向對象類庫，提供了數據訪問的高層介面。 ADO.NOT類庫在System.Data命名空間內，根據我們訪問的不同資料庫選擇命名空間，System.Data.SqlClient。 ADO.NET類最重要的優點是支持資料庫以斷開連接的方式工作。 AD ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類