Question

我试过的代码是

form: { 
        header: 'Edit Record',
        name: 'form',
        fields: [
            { name: 'recid', type: 'text', html: { caption: 'ID', attr: 'size="10" readonly' } },
            { name: 'fname', type: 'text', required: true, html: { caption: 'First Name', attr: 'size="40" maxlength="40"' } },
            { name: 'lname', type: 'text', required: true, html: { caption: 'Last Name', attr: 'size="40" maxlength="40"' } },
            { name: 'email', type: 'email', html: { caption: 'Email', attr: 'size="30"' } },
            { name: 'sdate', type: 'date', html: { caption: 'Date', attr: 'size="10"' } }
        ],
        actions: {
            Reset: function () {
                this.clear();
            },
            Save: function () {
                var errors = this.validate();
                if (errors.length > 0) return;
                if (this.recid == 0) {
                    w2ui.grid.add($.extend(true, { recid: w2ui.grid.records.length + 1 }, this.record));
                    w2ui.grid.selectNone();
                    this.clear();
                } else {
                    w2ui.grid.set(this.recid, this.record);
                    w2ui.grid.selectNone();
                    this.clear();
                }
            }
        }
    }
}

Answer 1

<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: grid-13</title>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
</head>
<body>
    <div id="grid" style="width: 100%; height: 400px;"></div>
    <script type="text/javascript">
        $(function () {
            $('#grid').w2grid({ 
                name: 'grid', 
                searches: [                
                    { field: 'lname', caption: 'Last Name', type: 'text' },
                    { field: 'fname', caption: 'First Name', type: 'text' },
                    { field: 'email', caption: 'Email', type: 'text' },
                ],
                show: { footer: true },
                sortData: [ { field: 'recid', direction: 'asc' } ],
                columnGroups: [
                    { caption: '', sortable: false, resizable: true },
                    { caption: '<input type="text" style="width:100%;"/>', sortable: false, resizable: true },
                    { caption: '<input type="text" style="width:100%;"/>',  sortable: false, resizable: true },
                    { caption: '<input type="text" style="width:100%;"/>', sortable: false, resizable: true },
                    { caption: '<input type="text" style="width:100%;"/>', sortable: false, resizable: true },
                    { caption: '<input type="text" style="width:100%;"/>',  sortable: false, resizable: true },
                    { caption: '<input type="checkbox"/>', sortable: false, resizable: true }
                ],
                columns: [                
                    { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center', resizable: true },
                    { field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
                    { field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true },
                    { field: 'email', caption: 'Email', size: '40%', sortable: true, resizable: true },
                    { field: 'sdate', caption: 'Start', size: '90px', sortable: true, resizable: true },
                    { field: 'edate', caption: 'End', size: '90px', sortable: true, resizable: true },
                    { field: 'udate', caption: 'Update', size: '90px', sortable: true, resizable: true },
                ],
                records: [
                    { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012', edate: '12/3/2012' },
                    { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012', edate: '11/3/2012' },
                    { recid: 3, fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
                    { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'frank@gmail.com', sdate: '9/3/2012', edate: '10/3/2012' },
                    { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '6/3/2012', edate: '4/24/2012' },
                    { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '2/3/2012', edate: '6/3/2012' },
                    { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'susan@gmail.com', sdate: '4/3/2012', edate: '6/23/2012' },
                    { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'david@gmail.com', sdate: '9/3/2012', edate: '4/16/2012' },
                    { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'magi@gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
                    { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
                    { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'peterson@gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
                    { recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012', edate: '8/3/2012' },
                    { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'magi@gmail.com', sdate: '6/3/2012', edate: '4/19/2012' },
                    { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012', edate: '8/5/2012' },
                    { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'peter@gmail.com', sdate: '9/3/2012', edate: '4/3/2012' },
                    { recid: 26, fname: 'Doer', lname: 'Welldo', email: 'magi@gmail.com', sdate: '4/3/2012', edate: '4/7/2012' },
                    { recid: 27, fname: 'Shashi', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
                    { recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'joe@gmail.com', sdate: '9/3/2012', edate: '12/6/2012' }
                ]
            });    
        });
    </script>
</body>

如何在w2Ui网格中的每列的标题部分插入文本字段？

1 个答案: