Extend ComboGrid Editors for DataGrid Of JQuery EasyUI


在JQueryEasyUI中为DataGrid自定义了一个ComboGrid编辑器。具体方法:
自己写一个扩展

$.extend($.fn.datagrid.defaults.editors, {
    combogrid: {
        init: function (container, options) {
            var input = $(‘<input type="text" class="datagrid-editable-input">‘).appendTo(container);
            input.combogrid(options);
            return input;
        },
        destroy: function (target) {
            $(target).combogrid(‘destroy‘);
        },
        getValue: function (target) {
            return $(target).combogrid(‘getValue‘);
        },
        setValue: function (target, value) {
            $(target).combogrid(‘setValue‘, value);
        },
        resize: function (target, width) {
            $(target).combogrid(‘resize‘, width);
        }
    }
});

定义DataGrid

<table id="tt1" class="easyui-datagrid" singleselect="true" idfield="MaterialReceivedEntryID"
    fit="true" striped="true" rownumbers="true" fitcolumns="true" showfooter="true">
    <thead>
        <tr>
            <th field="ItemID" width="80"
                formatter = "itemFormatter"
                editor="{
                type: ‘combogrid‘, options: {
                    required: true, panelWidth:260, fitColumns:true,
                    idField:‘ItemID‘, textField:‘Code‘,
                    url:‘<%= Html.AttributeEncode(Url.Action("GetRMItems", "Item")) %>‘,
                    columns:[[
                        { field: ‘Code‘, title: ‘物料代码‘, width: 80 },
                        { field: ‘Material‘, title: ‘材质‘, width: 80, align: ‘center‘},
                        { field: ‘Diameter‘, title: ‘直径‘, width: 60, align: ‘center‘ }
                    ]],
                    onSelect:function(rowIndex, rowData) {
                        $(‘#tt1‘).datagrid(‘updateRow‘, {
                            index: _lastIndex, row: {
                            Material: rowData.Material,
                            Diameter: rowData.Diameter } })
                    }
                }
            }">
                原材料代码
            </th>
            <th field="Material" width="80" align="center">
                材质
            </th>
            <th field="Diameter" width="60" align="center">
                直径(mm)
            </th>
            <th field="Long" width="60" align="center" editor="{ type: ‘numberbox‘, options: { required: true}}">
                长度(mm)
            </th>
            <th field="ReceivedQty" width="60" align="center" editor="{ type: ‘numberbox‘, options: { required: true}}">
                根数(PCS)
            </th>
            <th field="Weight" width="60" align="center" editor="{ type: ‘numberbox‘, options: { required: true, precision: 3}}">
                重量(T)
            </th>
            <th field="HeatNumber" width="100" align="center" editor="{ type: ‘validatebox‘, options: { required: true}}">
                炉号
            </th>
            <th field="Remark" width="80" align="center" editor="text">
                备注
            </th>
        </tr>
    </thead>
</table>

最后别忘了那个Formatter

function itemFormatter(value, row) {

    ... ...

}
时间: 2024-07-31 03:00:48

Extend ComboGrid Editors for DataGrid Of JQuery EasyUI的相关文章

jquery easyui datagrid 保存/加载自定义配置每列属性

直接附上源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Format DataGrid Columns - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="css/material/ea

jQuery EasyUI之DataGrid使用示例

jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页:http://www.jeasyui.com/demo/main/index.php.可以下载完整开发包,里面有示例代码可以参考. 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分:  <

Build CRUD Application with jQuery EasyUI

http://www.jeasyui.com/tutorial/app/crud.php It has become a common necessily for web application to collect data and manage it properly. CRUD allows us to generate pages to list and edit database records. This tutorial will show you how to implement

jQuery EasyUI DataGrid API 中文文档

扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_data.json', 3.      columns:[[ 4.          {field:'co

jQuery EasyUI - 数据表格(DataGrid)

由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid <!-- 加载jquery --> <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>

jQuery EasyUI 在datagrid上使用combotree 进行多选

datagrid本身有编辑功能,根据官方说明,在需要编辑的列上,加上editor 属性即可.具体的类型有以下几种: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. 最近想利用combotree实现一个可以多选的树,途中遇到一些问题,放到这里分享一下: 1. 基本写法: editor="{type:'combotree',options:{url:'datagrid_data.json',multip

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API] 2014-04-02   DataGrid 继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults. DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据. DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识.它是轻量级的和功能丰富的.合并单元格,多列标题,冻结列和页脚是仅有的几个特点. [依赖于] pane

jQuery EasyUI Datagrid VirtualScrollView视图简单分析

大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显,相对于其他一些框架,如果数据量达到几千,便会比较慢,特别是在IE下面.针对这种情况,我们首要做的是要相办法优化datagrid组件的各方面性能,不过任何事情都是可以变通解决的,virtualScrollView就是一种不错的解决方案. virtualScrollView的准则就是尽量少画tr到table里,表格的高度是有限的,而用户的可见区域是很有限的,所以数据量很大的时候,是没有必要将所有数据数据都画到表格中,这样

第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使用方法,这个组件 依赖于 Combo(自定义下拉框)和 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <select id="box" class="easyui-combogrid" name="dept" sty