easyui datagrid 自定义editor

 1   $.extend($.fn.datagrid.defaults.editors, {
 2         mycombogrid: {
 3             init: function (container, options) {
 4                 var input = $(‘<input type="text" class="datagrid-editable-input">‘).appendTo(container);
 5                 input.combogrid(options);
 6                 return input;
 7             },
 8             getValue: function (target) {
 9                 return $(target).combogrid(‘getValue‘);
10             },
11             setValue: function (target, value) {
12                 $(target).combogrid(‘setValue‘, value);
13             },
14             resize: function (target, width) {
15                 $(target).combogrid(‘resize‘, width);
16             }
17         }
18     });
{
                field: ‘sku‘, title: ‘SKU‘, width: 80, editor: {
                    type: ‘mycombogrid‘, options:
                        {
                            required: true, panelWidth: 410,
                            mode: ‘remote‘,
                            valueField: ‘sku‘,
                            idField: ‘sku‘,
                            textField: ‘sku‘,
                            url: ‘/Product/listSearch‘,
                            fit: true,
                            required: true,
                            columns: [[
                                { field: ‘sku‘, title: ‘sku‘, width: 100 },
                                { field: ‘name‘, title: ‘名称‘, width: 200 },
                                { field: ‘description‘, title: ‘描述‘, width: 100 }
                            ]]
                        }
                }
            }
时间: 2024-10-26 00:41:04

easyui datagrid 自定义editor的相关文章

easyui datagrid 自定义editor并根据实际情况(自定义options)判断返回多样的html控件

在添加的时候全部列都变成编辑状态,编辑的时候某些列不变成编辑状态,解决方法 1 自定义editor $.extend($.fn.datagrid.defaults.editors, { Uploadfile: {//Uploadfile就是你要自定义editor的名称 init: function (container, options) { /////通过options传参数 var status = $("#hidMode").val(); if (status == 'edit'

JQuery easyUi datagrid 中 editor 动态设置最大值最小值

前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagrid 可编辑行的editor属性具有 min 和 max 属性,设置可以输入的最大值和最小值,但是这个是固定的,如下: [html] view plain copy {field:'workRate',title:'<%/*填报*/%><bean:message key="task.wo

EasyUI Datagrid 自定义列、Foolter及单元格编辑

1:自定义列,包括 Group var head1Array = []; head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 }); head1Array.push({ title: 'yyyy', colspan: 4 }); var head2Array = []; //.each(units,function(i,unit)//colArray.push(field:′Id′,title:unit.Name);//);head2

easyui datagrid 自定义加载按钮实例

今天写一个项目,在用到datagrid的时候突然发现加载操作列中的自定义按钮出来问题,经过一番研究,原来这么简单.话不多说,上图 //获取选中行审核 function Checker(indexDiv) { $('#grid').datagrid('selectRow',indexDiv);//获取选中行 var rows = $('#grid').datagrid('getSelected');//获取选中行数据 ShowDiv(); //调用事件 $('#UserTd').html(rows

easyui datagrid自定义按钮列,即最后面的操作列

在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现首先是HTML部分 <table id="tt" class="easyui-datagrid" style="width:100%;height:554px"             singleSelect="false"              fitColumns="true"    

[转]jQuery EasyUI自定义DataGrid的Editor

原文地址:http://www.jeasyuicn.com/post-3.html 官网datagrid的api:http://jquery-easyui.wikidot.com/document:datagrid 首先,先看看官方的editor的介绍: 可以看到如果我们要自定义一个editor,需要实现四个方法(init,getValue,setValue,resize). 下面是我自己扩展的一个datetimebox类型 01 $.extend($.fn.datagrid.defaults.

easyUI datagrid editor扩展dialog

easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf

easyui datagrid editor checkbox 单击事件

Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', treeField:'name', columns:[[ {title:'Task Name',field:'name',width:180}, {field:'persons',title:'Persons',width:60,align:'right'}, {field:'begin',titl

EasyUi datagrid(onClickCell:用户单击一个单元格时触发 ) 單擊編輯 editor:{type: &#39;combobox&#39;}

1.columns列[一個單元格] 添加combobox下拉選項 $("#userGrid").datagrid({ singleSelect: true,            onClickCell: function (index, field, value) {                //Field = field;                //                var rows = $('#' + UserGrid).datagrid('getRo