1. 程式人生 > >easyui Datagrid 加入 add, cut, save工具欄

easyui Datagrid 加入 add, cut, save工具欄

Datagrid 列表加入 add, cut, save工具欄 
方式 1 js程式碼新增
<table id="List" title="列表" class="easyui-datagrid" > </table>


<script type="text/javascript">
    var toolbar = [{
        text: 'Add',
        iconCls: 'icon-add',
        handler: function () { alert('add') }
    }, {
        text: 'Cut',
        iconCls: 'icon-cut',
        handler: function () { alert('cut') }
    }, '-', {
        text: 'Save',
        iconCls: 'icon-save',
        handler: function () { alert('save') }
    }];
    $(function () {         $('#input_CouponType').combobox({             data: CouponTypeList,             valueField: 'id',             textField: 'text',             onSelect: function (o) {                 $('#TextBox_MaxCount').val(o.maxCount);             }         });         $('#List').datagrid({             url: null,             width: $(window).width() - 10,             methord: 'post',             height: $(window).height() - 135,             fitColumns: true,             sortName: 'AddTime',             sortOrder: 'desc',             idField: 'ID',             pageSize: 20,             pageList: [20,30, 50,100],             pagination: true,             striped: true, //奇偶行是否區分             singleSelect: true, //單選模式             rownumbers: true, //行號             nowrap: false,             columns: [[                 { field: 'ID', title: 'ID', width: 30, sortable: false },                 { field: 'UserName', title: '使用者名稱稱', width: 30, sortable: false },                 { field: 'AddTime', title: '生成時間', width: 60, sortable: false }             ,toolbar: toolbar
        });            });
方式 2 
<div id="divToolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>
<table id="List" title="列表" class="easyui-datagrid" toolbar="#divToolbar"
> </table>