jquery easyui网站开发实战(jQueryEasyUI使用教程扩展数据网格的编辑器)
jquery easyui网站开发实战(jQueryEasyUI使用教程扩展数据网格的编辑器)
jQuery EasyUI允许一些常见的编辑器添加到数据网格中,以便用户编辑数据。所有的编辑器都定义在$.fn.datagrid.defaults.editors对象中,这个可以继承扩展以便支持新的编辑器。本教程将向您展示如何添加一个新的numberspinner编辑器到数据网格中。
扩展numberspinner编辑器
$.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); } } });
在HTML标记中创建数据网格
<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>
我们分配numberspinner编辑器到 'unit cost' 字段中,当开始编辑一行时,用户可以通过numberspinner编辑器来编辑数据。
购买jQuery EasyUI最新正版授权!详情请"咨询在线客服"
葡萄城经典UI产品新年大促,惊喜折扣礼品送不停!
本站文章除注明转载外,均为本站原创或翻译