Json:Inline Table Editing Using Jquery Json

byBlogger -
0

                  Some common editors are added into datagrid to allow users to edit data. All the editor are defined in $.fn.datagrid.defaults.editors object that can be extended to support new editor. This tutorial will show you how to add a new numberspinner editor into the datagrid. 



HTML FILE
================================= 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<body>
    <h2>Extend editors for DataGrid</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip">&nbsp;</div>
        <div>Click the edit button on the right side of row to start editing with numberspinner editor for unit cost field.</div>
    </div>
    
    <div style="margin:10px 0">
    </div>
    
    <table id="tt" style="width:600px;height:250px"
            url="data/datagrid_data.json" title="Editable DataGrid" iconCls="icon-edit"
            singleSelect="true" idField="itemid" fitColumns="true">
        <thead>
            <tr>
<th field="itemid" width="60">Item ID</th>
<th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
<th field="unitcost" width="80" align="right" editor="numberspinner">Unit Cost</th>
<th field="attr1" width="180" editor="text">Attribute</th>
<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
<th field="action" width="80" align="center" formatter="formatAction">Action</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        function formatAction(value,row,index){
            if (row.editing){
            
                    
                    
                var s = '<a href="#" onclick="saverow(this)">Save</a> ';
                var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
                return s+c;
            } else {
                var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
                var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
                return e+d;
            }
        }
    </script>
    <script>
        $.extend($.fn.datagrid.defaults.editors, {
            numberspinner: {
                init: function(container, options){
                    var input = $('<input type="text">').appendTo(container);
                    return input.numberspinner(options);
                },
                destroy: function(target){
                    $(target).numberspinner('destroy');
                },
                getValue: function(target){
                    return $(target).numberspinner('getValue');
                },
                setValue: function(target, value){
                    $(target).numberspinner('setValue',value);
                },
                resize: function(target, width){
                    $(target).numberspinner('resize',width);
                }
            }
        });
        $(function(){
            $('#tt').datagrid({
                onBeforeEdit:function(index,row){
                    row.editing = true;
                    updateActions(index);
                },
                onAfterEdit:function(index,row){
                    row.editing = false;
                    updateActions(index);
                },
                onCancelEdit:function(index,row){
                    row.editing = false;
                    updateActions(index);
                }
            });
        });
        function updateActions(index){
            $('#tt').datagrid('updateRow',{
                index:index,
                row:{}
            });
        }
        function getRowIndex(target){
            var tr = $(target).closest('tr.datagrid-row');
            return parseInt(tr.attr('datagrid-row-index'));
        }
        function editrow(target){
            $('#tt').datagrid('beginEdit', getRowIndex(target));
        }
        function deleterow(target){
            $.messager.confirm('Confirm','Are you sure?',function(r){
                if (r){
                    $('#tt').datagrid('deleteRow', getRowIndex(target));
                }
            });
        }
        function saverow(target){
            $('#tt').datagrid('endEdit', getRowIndex(target));
        }
        function cancelrow(target){
            $('#tt').datagrid('cancelEdit', getRowIndex(target));
        }
    </script>
</body>
</html>


JSON FILE
======================================= 
{"total":28,"rows":[
    {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Small","itemid":"EST-1"},
    {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"DEMO","itemid":"EST-11"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
    {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
    {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
]}
Tags

You may like these posts

Post a Comment

Previous Post Next Post