标签 Datagrid 下的文章

EasyUI使用笔记——Datagrid的高级用法(1)

接上一篇[EasyUI使用笔记——Datagrid的使用及排序],在footer处有添加、修改和删除这几个操作。

其中添加,只需要弹出新窗口就可以了,而修改和删除,需要取到选中项的内容。

下面是用法:

1.添加营业部:

先添加一段html代码,用于显示模态窗口,window这部分的用法大家可以查下easyui的相关demo

<div id="openwindow_add" class="easyui-window" title="新增营业部" data-options="modal:true,closed:true,iconCls:'icon-add'" style="width:600px;height:360px;padding:10px;">        
</div>

之后js代码:

//生成iframe
function createFrame(url) {
    var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
    return s;
}

//弹出窗口
$('#btn_add').click(function () {
    $('#openwindow_add').html(createFrame('/System/DepartmentAdd')).window('open');
});

201607231469245706241968.png
2.修改营业部

同上,先添加一段html代码用于模拟窗口,当然也可以与添加共用一个,下面是js部分:

$('#btn_edit').click(function () {
     var row = $('#list').datagrid('getSelected');    //取得选中行
     if (row) {
        var $id = row.id;    //
        $('#openwindow_edit').html(createFrame('/System/DepartmentEdit?id='+$id)).window('open');
    }
    else{
        $.messager.alert('提示', '请选择要修改的行!', 'warning');
    }                    
});

201607231469245746180536.png
3.删除选中项

这里有这几点:

1)删除确认

2)异步删除

3)操作完成后重新加载datagrid数据

$('#btn_delete').click(function () {
    var row = $('#list').datagrid('getSelected');
    if (row) {
        var $id = row.id;   //主键ID
        $.messager.confirm('确认', '您确认想要删除记录吗?', function (r) {
            if (r) {
                $.ajax({
                    url: '/System/DepartmentDelete',
                    data: { id: $id },
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        $.messager.alert('提示', data.message, 'info');
                        $('#list').datagrid('reload');    //重新加载datagrid数据
                    },
                    error: function () {
                        $.messager.alert('错误', '删除失败', 'error');
                    }
                });
                                
            }
        });
    }
    else {
        $.messager.alert('提示', '请选择要删除的行!', 'warning');
    }
});

201607231469245814291367.png
201607231469245855482471.png

EasyUI使用笔记——Datagrid的使用及排序

Datagrid的使用:
添加一个table,其中class设置为easyui-datagrid,在data-options中设置datagrid的参数,我这里是这样写的:

<table class="easyui-datagrid" title="营业部管理" style="width:100%;"
       data-options="rownumbers:true,singleSelect:true,url:'/system/DepartmentList',method:'post',toolbar:'#tb',footer:'#ft',multiSort:true,remoteSort:true,pagination:true,
pageSize:10">
    <thead>
        <tr>
            <th data-options="field:'department',width:240, sortable:true">营业部名称</th>
            <th data-options="field:'province',width:100,align:'right', sortable:true">所在省份</th>
            <th data-options="field:'city',width:100,align:'right', sortable:true">所在城市</th>
            <th data-options="field:'superintendent',width:80, sortable:true">负责人</th>
            <th data-options="field:'builddate',width:120, sortable:true">成立日期</th>
            <th data-options="field:'address'">地址</th>
        </tr>
    </thead>
</table>

其中:
rownumbers表示是否显示行号, singleSelect表示单选 url异步取数据用的链接(就是从哪取数据),返回的是json格式

method取数据时提交方式,post或者get,我这里用的是get toolbar工具条,在头部显示的,后面给出代码

footer底部显示的,后面给出代码 multiSort多项排序

remoteSort远程排序,就是把排序数据提交到服务器,由服务器排序后返回,我这里是提交在服务器排序 pagination是否启用分页

pageSize在启用分页时生效,表示每页记录集的条数

下面是toolbar的代码,没什么东西,HTML的:

<div id="tb" style="padding:2px 5px;">
    <table>
        <tr>
            <td>
                <label>营业部名称:</label><input class="easyui-textbox" type="text" style="width:100px;" name="name" />
            </td>
            <td>
                <label>负责人:</label><input class="easyui-textbox" type="text" style="width:100px;" name="name" />
            </td>
            <td>
                <label>所在城市:</label>
                <input class="easyui-combobox" id="s_province" name="province" />
                <input class="easyui-combobox" id="s_city" name="city" />
            </td>
            <td>
                <label>成立日期:</label>
                <input class="easyui-datebox" style="width:110px"> 至 <input class="easyui-datebox" style="width:110px">
            </td>
            <td>
                <div class="buttonActive"><div class="buttonContent"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitSearch()">检索</a></div></div>
            </td>
        </tr>
    </table>
</div>

再下面是footer的代码,也是HTML的:

<div id="ft" style="padding:2px 5px;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" title="新增营业部" onclick="$('#add').window('open')"></a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" title="修改选中"></a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" title="删除选中"></a>
</div>

排序相关的:

在点表头进行排序时,会向服务器提交排序数据,两个参数,分别是sort和order,如果是多项排序的话,会分别使用半角逗号(“,”)进行分割,服务器需要自行组成SQL的排序字符串,代码非常简单,如下:

/// <summary>
/// 生成排序SQL
/// </summary>
/// <param name="order">排序规则</param>
/// <param name="sort">参与排序的字段</param>
/// <returns></returns>
public static string orderby(string order,string sort)
{
    StringBuilder sb = new StringBuilder();
    string[] array_order = order.Split(',');
    string[] array_sort = sort.Split(',');
    for(int i=0;i<array_sort.Length;i++)
    {
        sb.Append(string.Format("{0} {1},", array_sort[i].Trim(), array_order[i].Trim()));
    }
                
    return sb.ToString().TrimEnd(',');
}

再下面开始贴图了:
201607231469245455458720.png

分类

最新文章

最近回复

  • 青山: 某种原因,暂停友链,抱歉。
  • 青山: 计划搬迁到腾讯云,正...
  • 老徐: 具体要哪个呢?
  • 老徐: 是不是有点老?
  • 青山: 哇,林志炫
  • 老白: 哇,这改的可以,能不...
  • 老徐: 23333
  • 许建华: 我是为了表情包来的~
  • vultr vps: 感谢分享深入学习
  • 青山: 每一次都是不同的感受

归档

标签云

C# .net core asp.net 情感 SQL mongodb sql server EasyUI 安全 激活 linux 身份验证 https typecho .net sql注入 kms MVC IIS 高并发 IE 坑爹 服务器 mysql Oracle Combobox Datagrid 口语 数据抓取

其它