EasyUI DataGrid 动态新增 Toolbar

easyui datagrid 是一个弹性蛮大的元件，但是官方文件有点不足，是比较可惜的一点。下面，一条小龙会介绍一下，如何动态新增 toolbar button。这个技巧读者可以举一反三应用在任何想动态新增的部分上。这边尽量简化好来介绍其中的关键点。

一般写 JavaScript 应用的程式，实务上一条小龙 自己开发时都会希望能尽量把商业逻辑放在server 端来控制，client 端就是变成单纯的控件应用。这样的好处是后面比较好维护，因为后面在维护时，只要专注于 server 端的逻辑的变化就好，而不用 Client Server 两边比较来得知要如何改。

另一个好处是，让后续开发人员只需专注Server 端的开发技巧即可，而不必为了增加一个 button 这种常用到的功能，也要后端开发人员去了解 EasyUI 后才有办法去开发，如此一来就可以减少很多开发成本。

一般程式开发中，大家都知道要降低程式间的耦合性，也就是要降低程式间的关联性，尽量让各程式独立来发展，这个道理应用在这，就可以了解Client Server 端切割清楚，也会有助于，后续程式的稳定性。

下面，来介绍一下 EasyUI 的基本概念，也就是 EasyUI 的元件一定要先初始化，才能应用，而一但初始化，想再去改变它，就只能透过 EasyUI 元件所提供的 Function 来操作，一但没有对应 Function 可以操作，就只能想办法在一开始初始化中 就要定义好，以上是我们在操作 EasyUI 的重要观念。

要动态化操作前，首先要先知道如何用 静态网页来操作，没问题后，再来想办法用 后端程式 来产生相对应的 JS，以下就是静态网页的操作方式。

    $(function () {
        AddButton("btnAlert", "alert test", "icon-edit");
        var config = {};
        config.toolbar = toolbar;
        $('#dg').datagrid(config);
        loaddata();
    });
    var toolbar = [];
    function AddButton(btnID, caption, icon) {
        if (toolbar.length > 0) {
            toolbar[toolbar.length] = "-";
        }
        toolbar[toolbar.length] = {
            text: caption,
            iconCls: icon
        };
    }

    function loaddata() {
        var rawData = { "total": 28, "rows": [
            { "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
            { "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
            { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 28.50, "attr1": "Venomless", "itemid": "EST-11" },
            { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
            { "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
            { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
            { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
            { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 63.50, "attr1": "Adult Female", "itemid": "EST-16" },
            { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
            { "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
        ]
        };
        $('#dg').datagrid('loadData', rawData);
    }

    <table id="dg" style="700px;height:auto"
            title="DataGrid" iconCls="icon-edit" singleSelect="true">
        <thead>
            <tr>
                <th field="itemid" width="80">Item ID</th>
                <th field="productid" width="100">Product</th>
                <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
                <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>
                <th field="attr1" width="250" editor="text">Attribute</th>
                <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
            </tr>
        </thead>
    </table>

上述静态网页，这就是一条小龙为了做动态产生 button，做的一个概念网页，先把你可以想像的操作用静态网页来实验，实验成功在用后端来产生。该静态网页，重要的点就在于 AddButton 这个 Function ，如此实验即可得知，后面用后端程式只要产生呼叫 AddButton 这个 function 就能动态产生 button 了。

所以读者了解上述程式，就可以 接着来看下面与 ASP.NET 结合后的一个概念程式

<%@ Page Language="C#" AutoEventWireup="True" %>

<script language="C#" runat=server>
    public void Page_Init(object sender, System.EventArgs e)
    {
        string CusButton = "AddButton('btnAlert', 'alert test', 'icon-edit');";
        char vbCrLf = '\n';
        string s = @"/";
        Response.Write("<script type='text/javascript'>");
        Response.Write("function onBeforeInit() {" + CusButton + "}");
        Response.Write("<" + s + "script>" + vbCrLf);
    }
</script>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
    <link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/icon.css">

    <script type="text/javascript" src="./JS/jquery18min.js"></script>
    <script type="text/javascript" src="./JS/EasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./JS/EasyUI/easyui-lang-zh_TW.js"></script>

    <script type="text/javascript" src="./JS/dhtmlx/dhtmlxcommon.js"></script>
    <script type="text/javascript" src="./JS/fg.menu.js"></script>

    <link type="text/css" href="./css/fg.menu.css" media="screen" rel="stylesheet" />
    <link type="text/css" href="./css/theme/ui.all.css" media="screen" rel="stylesheet" />

<script type="text/javascript">
    $(function () {
        if (typeof (onBeforeInit) == 'function') {
            onBeforeInit();
        }
        var config = {};
        config.toolbar = toolbar;
        $('#dg').datagrid(config);
        loaddata();
    });
    var toolbar = [];
    function AddButton(btnID, caption, icon) {
        if (toolbar.length > 0) {
            toolbar[toolbar.length] = "-";
        }
        toolbar[toolbar.length] = {
            text: caption,
            iconCls: icon
        };
    }

    function loaddata() {
        var rawData = { "total": 28, "rows": [
            { "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
            { "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
            { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 28.50, "attr1": "Venomless", "itemid": "EST-11" },
            { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
            { "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
            { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
            { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
            { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 63.50, "attr1": "Adult Female", "itemid": "EST-16" },
            { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
            { "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
        ]
        };
        $('#dg').datagrid('loadData', rawData);
    }
</script>
<body>
   <form id="Form1" runat="server">
 
        <table id="dg" style="700px;height:auto"
                title="DataGrid" iconCls="icon-edit" singleSelect="true">
            <thead>
                <tr>
                    <th field="itemid" width="80">Item ID</th>
                    <th field="productid" width="100">Product</th>
                    <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
                    <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>
                    <th field="attr1" width="250" editor="text">Attribute</th>
                    <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
                </tr>
            </thead>
        </table>
   </form>
</body>
</html>

这个程式主要应用了上一篇 如何用 javascript 动态呼叫函数 的技巧，在 DataGrid init 前去呼叫 onBeforeInit 这个 function，这个就是一条小龙在前端框架中，为后端程式预留弹性的空间，当然后续读者在应用时，可以将这些init 分得更细，让后端程式有更明确的方式来呼叫。一条小龙在这边只是介绍其中的概念，所以会比较粗略一点。