在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) { ... ... }

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

  1. jquery easyui datagrid 加载保存好的自定义设置的列属性

    直接附上源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  2. jQuery EasyUI之DataGrid使用示例

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...

  3. Build CRUD Application with jQuery EasyUI

    http://www.jeasyui.com/tutorial/app/crud.php It has become a common necessily for web application to ...

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

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  5. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  6. jQuery EasyUI教程之datagrid应用

    一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...

  7. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  8. jQuery EasyUI - 数据表格(DataGrid)

    由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery, ...

  9. JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

    转自   http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...

随机推荐

  1. c# DataTable 中 Select 和 Clone 用法结合

    C# DataTable是存放数据的一个离线数据库,将数据一下加载到内存. DataTable.Select ()方法: Select();//全部查出来    Select(过滤条件);//根据过滤 ...

  2. 在网页中插入qq连接

    <a href="tencent://message/?uin=这里写qq号 &Site=这里随便七个名字 &Menu=要为yes">显示出来的名字&l ...

  3. spring-boot 整合redis作为数据缓存

    添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp ...

  4. SQL技术内幕二DDL

    创建数据库: if db_id('DBTest') is nullcreate database DBTest 创建表 use eb_fy_data_test---use 切换所在数据库上下文 if ...

  5. CentOS 根据命令查所在的包

    在工作中经常会遇到想用某个命令机器没装却又不知道命令在哪个包(源码编译不再本文范围内),下面介绍个比较笨的方法可以帮助我们搞定这个问题. 说明:蓝色=命令名称       浅绿=命令参数       ...

  6. Universal-Image-Loader(UIL)使用方法&流程图&源码分析 ----- 未完

    GitHub源码: Android-Universal-Image-Loader Features Multithread image loading (async or sync) 多线程加载(同步 ...

  7. Python设计模式——单例模式

    单例模式是日常应用中最广泛的模式了,其目的就是令到单个进程中只存在一个类的实例,从而可以实现数据的共享,节省系统开销,防止io阻塞等等 但是在多进程的应用中,单例模式就实现不了了,例如一些web应用, ...

  8. linux sed命令学习

    . Sed简介 . 定址 . Sed命令 . 选项 . 元字符集 . 实例 . 脚本 . 小技巧 . Sed简介 sed是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中, ...

  9. 开发设计模式(八)抽象工厂模式(Abstract Factory Pattern)

    抽象工厂模式主要有以下角色: 抽象工厂角色:担任这个角色的是工厂方法模式的核心,它是与应用系统的商业逻辑无关的.通常使用接口或抽象类实现.    具体工厂角色:这个角色直接在客户端的调用下创建产品的实 ...

  10. 《JavaScript设计模式与开发实践》-面向对象的JavaScript

    设计模式 面向对象 动态类型语言 编程语言按照数据类型大体分为:静态类型语言和动态类型语言. 静态类型语言在编译时便已确定变量的类型,而动态类型语言的变量类型要到程序运行时,待变量被赋予某个值之后,才 ...