easyui 列表按钮 DataGrid（数据表格）

最新推荐文章于 2024-01-29 16:44:33 发布

橙色阳光

最新推荐文章于 2024-01-29 16:44:33 发布

阅读量4.8k

点赞数 2

分类专栏： easyui

本文链接：https://blog.csdn.net/sat472291519/article/details/52230106

版权

easyui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要实现的效果图.

官方现有的demo有没有现成的.这种超链接按钮就需要我们自己去拼凑了.

需要用到easyui formatter 函数

easyui datagrid内容单元格的默认DOM结构(与标题单元格不同)

<td field="code">
    <div style="text-align:left" class="datagrid-cell datagrid-cell-c1-code">
         文字
    </div>
</td>

td标签的field属性便是字段的编码(官方案例中columns列集合中field:'code')，而单元格内容统一用一个div包裹起来

div标签有个 text-align样式，这个样式其实是由列属性align决定的

官方案例:

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'Code',width:100},    
        {field:'name',title:'Name',width:100},    
        {field:'price',title:'Price',width:100,align:'right'}    
    ]]    
});

摘录:

顾名思义，formatter是格式化的意思，也就是以何种形式呈现的意思，对于一个纯文本，我可以将它呈现为checkbox，也可以呈现为 input输入框，甚至下拉框等等，或者是在文本外层包裹更多的DOM(当然包裹这样做并没有多大意义)，这就是formatter的真正意义。

使用formatter需要注意以下几点：

无论formatter出何种形式，格式化出的DOM一定都是被包含在默认的div标签内
在写formatter函数时要保证有值返回，否则单元格没有内容可展示，所以if的时候别忘了else
formatter函数不会作用在列属性checkbox为true的单元格上，checkbox列是组件预留的。

formatter: function (value, row, index) {
                            //return 'value:' + value + 'row' + row.SHENHEBZMC + 'index' + index;
                            var updBtn = '<a href="javascript:void(0)" οnclick="updatePage(\'' + row.ZZBH + '\',1)" > 修改</a>';
                            var delBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',2)" > 删除</a>';
                            var subBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',3)" > 提交</a>';
                            var chtjBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',4)" > 撤回提交</a>';
                            var spBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',5)" > 审批</a>';
                            var cxspBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',6)" > 撤销审批</a>';
                            var spTtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',7)" > 作废</a>';
                            var spTtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',8)" > 取消预约</a>';

                            if (row.SHENHEBZMC == '待提交') {
                                return subBtn + "    " + updBtn + "    " + delBtn;
                            } else if (row.SHENHEBZMC == '待审批') {
                                return spBtn + "    " + chtjBtn;
                            } else if (row.SHENHEBZMC == '同意转出') {
                                return spTtn + "    " + cxspBtn;
                            } else if (row.SHENHEBZMC == '同意接收') {
                                return spTtn;
                            } else {
                                return '';
                            }

                            //return '<a href="javascript:void(0)"> 提交</a>    ' + '<a href="javascript:void(0)"> 修改</a>    ' + '<a href="javascript:void(0)"> 删除</a>';
                            //return '<font color="red">' + 提交 + '</font>';
                        }

value:当前值
row:行row.property(属性,property的字段都是可以直接调用方便做业务逻辑判断)

index:序号

(待更新...)

摘录1(值得参考的写法)

unction formatType(val, row, index) {
              var cdate = '<input class="easyui-datebox" id="startDate" type="text"  style="height: 32px; width: 80px" data-options="formatter:Common.TimeFormatter,parser:dateparser" />';
              var ctime = '<input class="easyui-datetimespinner"  data-options="formatter:Spinformattime,parser:Spinparser" style="width:80px;">';
              var mcombox = '<input class="easyui-combobox" id="mc" name="mc" style="width:235px" url=\'\' data-options="valueField:\'zhymch\', textField:\'zhymc\',multiple:true,panelHeight:\'auto\'" >';
              var scombox = '<input class="easyui-combobox" id="sc" name="sc" data-options="valueField:\'id\',textField:\'text\'">';
              var nbox = '<input class="easyui-numberbox" value="100" data-options="min:0,precision:2">';
              switch (row.OPERATETYPE) {
                  case "dt":
                      return ctime;
                      break;
                  case "scm":
                      return scombox;
                      break;
                  case "mcm":
                      return mcombox;
                      break;
                  case "d":
                      return cdate;
                      break;
                  default:
                      break;
              }
          };

摘录2

My Project的实践

$("#easy-grid").datagrid({
                width: $(".grid").width() - 10,
                height: ($(window).height() - 20),
                url: 'ZZ_Fcdzzd_Select.aspx',
                queryParams: {
                    Trans: 'load',
                    startDate: $("#txt_ZZYYSJ").val(),
                    endDate: $("#txt_zzrqjs").val(),
                    yy: $("#hid_zzyy").val(),
                    ztzd: $('#cbb_ztzd').combobox('getValue'),
                    ztbm: $("#txt_ztzd").val(),
                    zxzt: $('#cbb_zxzt').combobox('getValue'),
                    zzlx: $('#cbb_zzlx').combobox('getValue'),
                    zzfx: $('#cbb_zzfx').combobox('getValue')
                },
                singleSelect: true,//当true允许只选择一行. 
                // fitColumns:true,
                method: "post",
                pageList: [20, 50],
                pageSize: 20,
                AllowPager: true,
                nowrap: true,
                striped: true,
                pagination: true,
                rownumbers: true,
                toolbar: '#tb',
                idField: 'ZZBH',

                frozenColumns: [[
                    {
                        field: 'ZHUANZHENFXMC', title: '操作', width: 120, formatter: function (value, row, index) {
                            //return 'value:' + value + 'row' + row.SHENHEBZMC + 'index' + index;
                            var updBtn = '<a href="javascript:void(0)" οnclick="updatePage(\'' + row.ZZBH + '\',1)" > 修改</a>';
                            var delBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',2)" > 删除</a>';
                            var subBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',3)" > 提交</a>';
                            var chtjBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',4)" > 撤回提交</a>';
                            var spBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',5)" > 审批</a>';
                            var cxspBtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',6)" > 撤销审批</a>';
                            var spTtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',7)" > 作废</a>';
                            var spTtn = '<a href="javascript:void(0)" οnclick="subState(\'' + row.ZZBH + '\',8)" > 取消预约</a>';

                            if (row.SHENHEBZMC == '待提交') {
                                return subBtn + "    " + updBtn + "    " + delBtn;
                            } else if (row.SHENHEBZMC == '待审批') {
                                return spBtn + "    " + chtjBtn;
                            } else if (row.SHENHEBZMC == '同意转出') {
                                return spTtn + "    " + cxspBtn;
                            } else if (row.SHENHEBZMC == '同意接收') {
                                return spTtn;
                            } else {
                                return '';
                            }

                            //return '<a href="javascript:void(0)"> 提交</a>    ' + '<a href="javascript:void(0)"> 修改</a>    ' + '<a href="javascript:void(0)"> 删除</a>';
                            //return '<font color="red">' + 提交 + '</font>';
                        }
                    },
                    { field: 'SHENHEBZMC', title: '审批状态', width: 120 },
                    { field: 'XINGMING', title: '姓名', width: 150 },
                    { field: 'SHENFENZH', title: '身份证号', width: 100 }
                ]],
                columns: [[

                    { field: 'XINGBIE', title: '性别', width: 80, align: "right" },
                    { field: 'NIANLING', title: '年龄', width: 150, align: "center" },
                    { field: 'LIANXIDH', title: '联系电话', width: 150, align: "right" },
                    { field: 'LIANXISJHM', title: '手机号码', width: 200 },
                    //{ field: 'ZHUANZHENFXMC', title: '转诊方向', width: 200 },
                    { field: 'ZHUANZHENLXNAME', title: '转诊类型', width: 200 },
                    { field: 'ZZDZXZTMC', title: '执行状态', width: 200 },
                    { field: 'ZZBH', title: '转诊单号', width: 200 },
                    { field: 'ZHUANZHENRQ', title: '转诊日期', width: 200 },
                    { field: 'ZRJGMC', title: '转往医院', width: 200 },
                    { field: 'ZZYXJZSJ', title: '转诊有效期', width: 200 },
                    { field: 'YIYUANYHMC', title: '转诊医生', width: 200 },
                    { field: 'FUWUJGMC', title: '转诊医院', width: 200 },
                    { field: 'SHEHEZZBH', title: '原转诊单号', width: 200 },
                    { field: 'LIANXIDZ', title: '居住地址', width: 200 }
                ]],
                onDblClickRow: function (rowidex, rowData) {
                    ViewZZD(rowData.ZZBH);
                    //var data = $('#easy-grid').datagrid("getSelected");
                    //if (data != null) {
                    //    ViewZZD(data.ZZBH);
                    //}


                }

            });

function subState(bm, btntype) {
            $.ajax({
                type: "GET",
                url: "ZZ_Fcdzzd_Select.aspx",
                data: { Trans: 'rbtn', bm: bm, btntype: btntype },
                cache: false,
                dataType: "json",
                async: true,
                success: function (retMsg) {
                    //alert(retMsg[0].XINGMING);
                    try {
                        repleacLoad();
                    } catch (e) {
                        //alert("获取失败");
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //alert(textStatus);
                    alert('2');
                }
            });
        }

参考文献

① http://www.cnblogs.com/babietongtianta/p/3909705.html

② http://zhidao.baidu.com/link?url=BUmFrp-VAR864D0hxACON_kEzYmjjxMfSb5YOdzvwMQnsaE5DA9W88CIi0tmBtWY1OHlh3na-tv8xz2M49wLqhBYw00_c2AcVKTh4MdN0qm

橙色阳光

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
easyui 列表按钮 DataGrid（数据表格）

要实现的效果图.官方现有的demo有没有现成的.这种超链接按钮就需要我们自己去拼凑了.需要用到easyui formatter 函数(待更新...)My Project的实践$("#easy-grid").datagrid({ width: $(".grid").width() - 10, he
复制链接

扫一扫