1. 程式人生 > >easyui datagrid的toolbar如何新增輸入框或自定義控制元件

easyui datagrid的toolbar如何新增輸入框或自定義控制元件

~_~一個程式設計師的淘寶店: 點選開啟連結

  <script type="text/javascript">

$(function () {

 var lastIndex;
            $('#tt').datagrid({
                toolbar: [{
                    text: '新增',
                    iconCls: 'icon-add',
                    handler: function () {
                        var v = $('#tt').datagrid('getRows').length + 1;
                        $('#tt').datagrid('endEdit', lastIndex);
                        $('#tt').datagrid('appendRow', {
                            itemid: v,
                            productid: '',
                            listprice: '',
                            unitprice: '',
                            attr1: '',
                            status: 'P'
                        });
                        lastIndex = $('#tt').datagrid('getRows').length - 1;
                        $('#tt').datagrid('selectRow', lastIndex);
                        $('#tt').datagrid('beginEdit', lastIndex);
                    }
                }, '-', {
                    text: '刪除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        var row = $('#tt').datagrid('getSelected');
                        if (row) {
                            var index = $('#tt').datagrid('getRowIndex', row);
                            $('#tt').datagrid('deleteRow', index);
                        }
                    }
                }, '-', {
                    text: '儲存',
                    iconCls: 'icon-save',
                    handler: function () {
                        $('#tt').datagrid('acceptChanges');
                    }
                }, '-', {
                    text: '重置',
                    iconCls: 'icon-undo',
                    handler: function () {
                        $('#tt').datagrid('rejectChanges');
                    }
                }],
                onBeforeLoad: function () {
                    $(this).datagrid('rejectChanges');
                },
                onClickRow: function (rowIndex) {
                    if (lastIndex != rowIndex) {
                        $('#tt').datagrid('endEdit', lastIndex);
                        $('#tt').datagrid('beginEdit', rowIndex);
                    }
                    lastIndex = rowIndex;
                }
            });

$('#DIV_toolbar').appendTo('.datagrid-toolbar');

 });
 </script>

<div id="DIV_toolbar'" style=" margin :0px; padding :5px;">           |
       單據編號:XSD2013060001
       &nbsp;
       客戶姓名:
        <select id="cc" class="easyui-combobox" name="state" style="width:100px;" data-options="required:true">
      <option value="張三">張三</option>
      <option value="李四">李四</option>
      <option value="王五">王五</option>
     </select>
        &nbsp;
        日期:
        <input id="Text4" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
    </div>

~_~一個程式設計師的淘寶店: 點選開啟連結