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) { ... ... }
Extend ComboGrid Editors for DataGrid Of JQuery EasyUI的更多相关文章
- jquery easyui datagrid 加载保存好的自定义设置的列属性
直接附上源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- jQuery EasyUI之DataGrid使用示例
jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...
- Build CRUD Application with jQuery EasyUI
http://www.jeasyui.com/tutorial/app/crud.php It has become a common necessily for web application to ...
- jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- jQuery EasyUI教程之datagrid应用
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- jQuery EasyUI - 数据表格(DataGrid)
由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery, ...
- JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
转自 http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...
随机推荐
- 4.MySQL连接并选择数据库(SQL & C)
在连接了MySQL数据库之后,可以通过SQL命令或者C.PHP.JAVA等程序来指定需要操作的数据库.这里主要介绍SQL命令和相应的C程序. 首先创建用户rick(赋予所有权限) mysql> ...
- Nwjs从入门到精通 菜鸟实践笔记【1】
最近公司有想使用Nw来开发浏览器的想法,自己一直学的PHP,在网上并没有找到太多的相关资料,所以,就自己摸索着撸一条自学笔记: 当然呢,这里记录的都是我自己学习中遇到的问题,以及收获,希望通过自己的分 ...
- centos coreseek 快速安装
CoreSeek快速安装: 安装前,建议查看:源码包说明README:4.0/4.1版可参考3.2版本安装,步骤相同:如遇到问题,请看详细安装说明. ##下载coreseek:coreseek 3.2 ...
- 读书笔记-JavaScript中的全局对象
对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用.这个JavaScript自身提供的全局对象的功能包括: 1.全局对象拥有一些常用的属性 ...
- IntelliJ IDEA 14.x 创建工作空间与多个Java Web项目
以往的Eclipse.NetBeans等开发工具不同,IDEA的Project相当与Eclipse的Workspace,而Module相当于Project. 下边就给出Eclipse与IDEA的概念的 ...
- Unity3d Shader开发(三)Pass(Pass Tags,Name,BindChannels )
Pass Tags 通过使用tags来告诉渲染引擎在什么时候该如何渲染他们所期望的效果. Syntax 语法 Tags { "TagName1" = "Value1&qu ...
- 成为Java GC专家(4)—Apache的MaxClients参数详解及其在Tomcat执行FullGC时的影响
下面我们看一下Apache的 MaxClients 参数在Full GC 发生时是如何影响系统的. 大部分开发人员都知道在由于GC发生而导致的”停止世界现象(STW) “(详细请参见Understan ...
- Iis load balance
http://www.agilesharp.com/u/yanyangtian/Blog.aspx/t-196 IIS负载均衡-Application Request Route详解第二篇:创建与配 ...
- httpcontext in asp.net unit test
[TestMethod] [HostType("ASP.NET")] [UrlToTest("http://localhost:25153/qq/a.aspx" ...
- 个人作业-Homework1感想
我以前没有系统学习过C++和C#,编程能力比较差.这次个人作业对我来说是一个很大的挑战.由于布置作业的时间是开学的第一周,因为还没有从假期的状态中转换出来,这对我写作业又增加了一定的难度. 在开始写作 ...