【Easyui】JavaScript创建数据网格的情况下追加to

这是经过各系列普通初始化后的datagrid：

1.在原有toolbar上追加自定义功能，例如搜索框啦，筛选框之类的：

（我是图）

懒得把弄好的toolbar再弄回去.....没有图片还请自行脑补一下，具体实现方法很简单，代码如下(粗体部分便是追加代码)：

toolbar: [

                { text: '增加', iconCls: 'icon-add', handler:function () { deviceInfoAddClick(); } },

                { text: '修改', iconCls: 'icon-edit', handler:function () { deviceInfoEditClick(); } },

                { text: '删除', iconCls: 'icon-remove', handler:function () { deviceInfoDeleteClick(); } },

                { text: '查看', handler:function() { } }, '-',

                { text: '刷新', iconCls: 'icon-reload', handler:function () { deviceInfoRefreshClick(); } },

                { text: '导出', iconCls: 'icon-save', handler:function() { $(dg).treegrid('reload'); } }, '-',

               {text:document.getElementById('shaixuan').innerHTML}

]

body内代码：

             <div id="shaixuan" style="display: none">

             <br>

             <select onchange="mChange(this.value)"  id="sxCollege">

             <option value="0">查看所有</option>

             <option th:each="l:${college}" th:value="${l.id}" th:text="${l.name}"></option>

             </select>

             </div>

---

2.加强版本的追加工具，大概原理就是在初始化datagrid的时候不去初始化toolbar，而在datagrid的主体div内定义toolbar属性，代码如下：

表格：

<table id="t_tbclass" toolbar="#wu-toolbar"></table>

工具栏div：

<div id="wu-toolbar">

            <div class="wu-toolbar-button">

                <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel()" plain="true">取消</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-print" onclick="openAdd()" plain="true">打印</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-help" onclick="openEdit()" plain="true">帮助</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-undo" onclick="remove()" plain="true">撤销</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-redo" onclick="cancel()" plain="true">重做</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-sum" onclick="reload()" plain="true">总计</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-back" onclick="reload()" plain="true">返回</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-tip" onclick="reload()" plain="true">提示</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="reload()" plain="true">保存</a>

                <a href="#" class="easyui-linkbutton" iconCls="icon-cut" onclick="reload()" plain="true">剪切</a>

            </div>

            <div class="wu-toolbar-search">

                <label>起始时间：</label><input class="easyui-datebox" style="width:100px">

                <label>结束时间：</label><input class="easyui-datebox" style="width:100px">

                <label>用户组：</label>

                <select class="easyui-combobox" panelHeight="auto" style="width:100px">

                    <option value="0">选择用户组</option>

                    <option value="1">黄钻</option>

                    <option value="2">红钻</option>

                    <option value="3">蓝钻</option>

                </select>

                <label>关键词：</label><input class="wu-text" style="width:100px">

                <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>

            </div>

        </div>

效果展示：

---

3.不使用JavaScript初始化datagrid，使用已有的表格元素创建，本篇文章主要是讲如何使用JavaScript追加工具，故在此不做赘述。