easyui Datagrid 加入 add, cut, save工具欄
阿新 • • 發佈:2019-01-02
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>