很漫长没打开我之博客园,刚刚大概扫了同样肉眼我事先写的笔记,关于Devexpress那篇居然出四千基本上的浏览记录,不知情对浏览了之博友有无出从至一点点作用。当然我形容笔记仅仅只是给好留个记,如果歪打正着帮助了卿,那是雅安慰之呦!哈哈……今天又来举行笔记了!

   
 最近手头有个web项目要用到第三着控件(EasyUi),用第三正值控件做下的效果终究比原来生态之要聊好看那么一些,该品种中出只要求,需要以数额列表中直接编辑数据保存,行话叫做行内编辑。

 
 于讲行内修之前,我们用先了解哪些使EasyUi创建一个DataGrid,当然方式来那么些(1.easyui.js,或者直接html代码加easyui的Style),我使用的凡JS的章程:

   一、使用Js创建DataGrid

图片 1

方是效益图,

Html代码如下:在页面定义一个table

图片 2图片 3

1 <!--数据展示 -->
2 <div>
3     <table id="DataGridInbound"></table>
4 </div>

View Code

 Js代码如下:

 有几乎个自自己觉得于重大的性质在此标志下

url:这里是datagrid获取数据集的地点,就是你的Action,需要注意的是,你的Action需要返回Json格式的多寡。

pagination:设置datagrid是否分页显示

queryParams:你的询问条件参数

formatter:格式化,在日期列用到了,EasyUi的datagrid显示日期若不格式话,日期会乱显示

这些性在EasyUi的官网还生详细介绍,我哪怕不深入解释了。

图片 4图片 5

 1 $("#DataGridInbound").datagrid({
 2             title: '入库详情',
 3             idField: 'Id',
 4             rownumbers: 'true',
 5             url: '/Inbound/GetPageInboundGoodsDetail',
 6             pagination: true,//表示在datagrid设置分页              
 7             rownumbers: true,
 8             singleSelect: true,
 9             striped: true,
10             nowrap: true,
11             collapsible: true,
12             fitColumns: true,
13             remoteSort: false,
14             loadMsg: "正在努力加载数据,请稍后...",
15             queryParams: { ProductName: "", Status: "",SqNo:"" },
16             onLoadSuccess: function (data) {
17                 if (data.total == 0) {
18                     var body = $(this).data().datagrid.dc.body2;
19                     body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
20                     $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
21                 }
22                     //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
23                 else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
24             },
25             columns: [[
26                 { field: 'ck', checkbox: true },
27                 { field: 'Id', hidden: 'true' },
28                 { field: 'InBoundId', hidden: 'true' },
29                 { field: 'ProductId', hidden: 'true' },
30                 { field: 'ProductTypeId', hidden: 'true' },
31                 { field: 'SqNo', title: '入库参考号', width: '100', align: 'left', sortable: true },
32                 {
33                     field: 'Status', title: '状态', width: '100', align: 'left', sortable: true,
34                     formatter: function (value, index, row) {
35                         if (value == "1") {
36                             return '已入库';
37                         }
38                         else if (value == "-1") {
39                             return '待入库';
40                         }
41                     }
42                 },
43                 {
44                     field: 'InboundDate', title: '入库日期', width: '100', align: 'left', sortable: true,                   
45                     formatter: function (date) {
46                         var pa = /.*\((.*)\)/;
47                         var unixtime = date.match(pa)[1].substring(0, 10);  //通过正则表达式来获取到时间戳的字符串
48                         return getTime(unixtime);
49                     }
50                 },
51                 { field: 'ProductName', title: '产品名称', width: '100', align: 'left', sortable: true },
52                 { field: 'ProductType', title: '产品类型', width: '100', align: 'left', sortable: true },
53                 { field: 'Num', title: '数量', width: '100', align: 'left', sortable: true },
54                 { field: 'Storage', title: '所属仓库', width: '100', align: 'left', sortable: true },
55                 { field: 'CompanyCode', title: '所属公司', width: '100', align: 'left', sortable: true },
56                 { field: 'CreateBy', title: '操作人', width: '100', align: 'left', sortable: true },
57             ]],
58         });

View Code

 

老二、今天的要,DataGrid行内编辑

图片 6

万一齐效益图,我们在DataGrid行内直接换多少

Js代码如下:

什么样实现行内编辑,需要在你所编纂的一味元格中加入editor属性,editor属性有只type(他支持多控件类型,可以交官网查阅)就是编的控件类型。

像,上图被“入库状态”,首先我们定义数据源,json格式是主要。

图片 7图片 8

var InboundStatus = [{ "value": "1", "text": "入库" }, { "value": "-1", "text": "待入库" }];

View Code

下一场用格式转换函数,不然你选择的时偏偏见面显得value值,不是亮文本值。代码如下:

图片 9图片 10

function unitformatter(value, rowData, rowIndex) {
        if (value == 0) {
            return;
        }
        for (var i = 0; i < InboundStatus.length; i++) {
            if (InboundStatus[i].value == value) {
                return InboundStatus[i].text;
            }
        }
    }

View Code

怎样把数据源绑定到DataGrid列中,代码如下:

formatter:使用我们面前定义之易格式函数。

options:中的data就是咱们定义之数据源。

valueField:选中后的value值,不用详细分解了吧

textField:选中后出示的价值,文本值。

type:combobox,就是生拉选项的体制。

图片 11图片 12

{
                field: 'Status', title: '入库状态', formatter: unitformatter, editor: {
                    type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
                }
            },
//这部分代码请结合下面的创建Grid的Js代码查看。

View Code

 

图片 13图片 14

$("#dataGrid").datagrid({
        title: "产品列表",
        idField: 'ProductID',
        treeField: 'ProductName',
        onClickCell: onClickCell,
        striped: true,
        nowrap: true,
        collapsible: true,
        fitColumns: true,
        remoteSort: false,
        sortOrder: "desc",
        pagination: true,//表示在datagrid设置分页              
        rownumbers: true,
        singleSelect: false,
        loadMsg: "正在努力加载数据,请稍后...",
        url: "/Inbound/GetProductPage",
        onLoadSuccess: function (data) {
            if (data.total == 0) {
                var body = $(this).data().datagrid.dc.body2;
                body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
                $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
            }
                //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
            else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
        },
        columns: [[
            { field: 'ck', checkbox: true },
            { field: 'ProductID', title: '产品ID', hidden: true },
            { field: 'CategoryID', title: '分类ID', hidden: true },
            { field: 'ProductName', title: '产品名称', width: '100', align: 'left', sortable: true },
            { field: 'CompanyCode', title: '所属公司', width: '100', align: 'center', sortable: true },
            { field: 'CategoryName', title: '所属分类', width: '100', align: 'center', sortable: true },
            { field: 'Num', title: '数量', editor: 'numberbox' },
            {
                field: 'Status', title: '入库状态', formatter: unitformatter, editor: {
                    type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
                }
            },
           {
               field: 'InDate', title: '入库日期', width: '100', editor: {
                   type: 'datebox'
               }
           },
           {
               field: 'Storage', width: '100', title: '所入仓库',
               formatter: function (value, row) {
                   return row.Storage || value;
               },
               editor: {
                   type: 'combogrid', options: {
                       //url: '/Storage/GetAllStorage',
                       //url:'/Product/GetAllCustomerAddress',
                       rownumbers: true,
                       data: $.extend(true, [], sdata),
                       idField: 'AddressID',
                       textField: 'Name',
                       columns: [[
                           { field: 'AddressID', hidden: true },
                           { field: 'Name', title: '库名' },
                           { field: 'Country', title: '国家' },
                           { field: 'Province', title: '省份' },
                           { field: 'City', title: '市' },
                           { field: 'Area', title: '区' },
                           { field: 'Address', title: '详细地址' },
                       ]],
                       loadFilter: function (sdata) {
                           if ($.isArray(sdata)) {
                               sdata = {
                                   total: sdata.length,
                                   rows: sdata
                               }
                           }
                           return sdata;
                       },
                   }
               }
           }
        ]],
        onBeginEdit: function (index, row) {
            var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
            $(ed.target).combogrid('setValue', { AddressID: row.AddressID, Name: row.Name });
        },
        onEndEdit: function (index, row) {
            var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
            row.Storage = $(ed.target).combogrid('getText');
        },
        onClickRow: function (index, row) {//getEditor
            var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
            if (ed != undefined) {
                var s = row.Storage;
                for (var i = 0; i < sdata.length; i++) {
                    if (s == sdata[i].Name) {
                        $(ed.target).combogrid('setValue', sdata[i].AddressID);
                    }
                }
            }
        }
    });

View Code

其三、重头戏,也是自己遇到的题目。

叙述:我以datagrid中补充加了下拉datagrid控件,当自家先是潮当选后,如果在夺点击datagrid行,选中的下拉datagrid控件的值会被刷掉,这个问题确实困扰自己好老,不过新兴处理了,那种感觉吗是无与伦比之爽啊!

图片 15

倘若达到效果图,“所符合仓库”一排列,下拉是个datagrid,他的科班词汇吃“Combogird”。就是此家伙第一次入选没问题,第二次点击会拿第一软当选的值刷掉。这也是均等开始自我本着EasyUi的一个OnClickRow事件不打听。

事先来齐自家事先的错误代码:

图片 16图片 17

onClickRow: function (index, row) {//getEditor
            var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });

                        $(ed.target).combogrid('setValue', row.Name);
                }
            }
        }

View Code

世家一块一定十分烦躁这个row.Name是单什么东西?what?其实自己同一开始吧非知道,因为这是错误代码,我是病急乱投医,胡乱写的,哈哈,也未是胡写啊,因为自己的下拉grid中产生个字段是Name,然而我管他混淆了,此row是因你点击的datagrid的row,而不是你数据源的row。我呢是延绵不断调试Js看出来的头脑。我点击datagrid的早晚,代码跳入OnClickRow事件中,有句代码:“var
ed = $(this).datagrid(‘getEditor’, { index: index, field: ‘Storage’
});”,然后发现ed为null,
Js抛大,但是界面看不出来,只是把选中的数刷掉了。找到问题后,还是未确定,代码修改完毕,再运行,正常显示,也不刷掉自己入选的值。

没错代码如下:

图片 18图片 19

onClickRow: function (index, row) {//getEditor
            var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
            if (ed != undefined) {
                var s = row.Storage;
                for (var i = 0; i < sdata.length; i++) {
                    if (s == sdata[i].Name) {
                        $(ed.target).combogrid('setValue', sdata[i].AddressID);
                    }
                }
            }
        }

View Code

 一下凡是生拉Grid的数据源

图片 20图片 21

 function synchroAjaxByUrl(url) {
        var temp;
        $.ajax({
            url: url,
            async: false,
            type: 'get',
            dataType: "json",
            success: function (data) {
                temp = data;
            }
        });
        return temp;
    }

    var sdata = synchroAjaxByUrl('/Product/GetAllCustomerAddress');

View Code

问题记下来,仅供参考。

相关文章

网站地图xml地图