easyui datagrid編輯

http://www.jeasyui.net/extension/202.html

 

1.保證引入必要的js包,這些在壓縮包裏都,(datagrid-cellediting.js這個包一下要在datagrid創建之前引入,我是因爲這個迷惑了一會兒)

    <link rel="stylesheet" type="text/css" href="./js/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="datagrid-cellediting.js"></script>

 

2.在列中添加editor(editor有多種類型,這裏只寫了一種)

            $('#id').datagrid({
                url: '',
                method: 'get',
                iconCls: 'icon-reload',
                pagination: true,
                pageNumber: 0,
                pageSize: 20,
                pageList: [20, 40, 100, 200, 500],
                striped: true,
                rownumbers: true,
                menuSetFunc: null,
                columns: [[
                    {field: 'g_customer_no', title: "客戶賬號", sortable: true, width: 100, align: 'center',editor:'text'},
                ]]
            }).datagrid("columnMoving");
 

 

3. 數據可以編輯js(在生成datagrid後執行)
$('#id').datagrid('enableCellEditing');