easyui实现tabs切换并查询数据

最新推荐文章于 2021-08-18 16:09:58 发布

原创最新推荐文章于 2021-08-18 16:09:58 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#个人记录 #菜鸟记录

这篇博客介绍了如何使用EasyUI的tabs组件在前端实现页面左侧的Tab切换，并根据不同的Tab标题动态加载对应状态的数据。通过JavaScript的onSelect事件处理函数，根据标题改变datagrid的数据源，同时展示了后台ashx文件如何处理请求并返回数据。

前台aspx：

</div>

此处分布为西侧吧。根据页面情况分布。tabPosition="left"是tabs的属性：工具栏位置。

前台js:

$(function () {
    var stats = null;
    $('#status').tabs({
        border: false,
        onSelect: function (title) {
            //url: "Data/FlowIndex.ashx?req_fun=GetByStatus&status=" + statu
            if (title == "全部") {
                $("#tabList").datagrid({
                    url: "Data/ashx?req_fun=select&pid=" + pid
                })
            }
            if (title == "执行中") {
                $("#tabList").datagrid({
                    url: "Data/a.ashx?req_fun=select&pid=" + pid + "&state=" + FLOW_STATUS.Start
                })
            }
            if (title == "已停止") {
                $("#tabList").datagrid({
                    url: "Data/a.ashx?req_fun=select&pid=" + pid + "&state=" + FLOW_STATUS.Stop
                })
            }
            if (title == "已完成") {
                $("#tabList").datagrid({
                    url: "Data/a.ashx?req_fun=select&pid=" + pid + "&state=" + FLOW_STATUS.Finished
                })
            }
            if (title == "已作废") {
                $("#tabList").datagrid({
                    url: "Data/a.ashx?req_fun=select&pid=" + pid + "&state=" + FLOW_STATUS.Nullify
                })
            }
            if (title == "无效") {
                $("#tabList").datagrid({
                    url: "Data/FlowIndex.ashx?req_fun=GETBYSTATUS&pid=" + pid + "&state=" + FLOW_STATUS.Invalid
                })
            }

        }
    });

全局变量：

var FLOW_STATUS = {
    /// <summary>
    /// 无效
    /// </summary>
    Invalid : 0,
    /// <summary>
    /// 停止
    /// </summary>
    Stop :1,
    /// <summary>
    /// 启动
    /// </summary>
    Start:2,
    /// <summary>
    /// 完成
    /// </summary>
    Finished:3,
    /// <summary>
    /// 作废
    /// </summary>
    Nullify:4

}

后台ashx：

decimal? pid = QueryDecimal(context, "pid");

decimal? state = QueryDecimal(context, "state");

List<GAEA.FLOW.Model.T_FLOW> list = flowL.GetInstanceList(pid.Value);
if (list.Count > 0)
list = (from l in list where (l.FLOW_PARENT_TAG == null && l.FLOW_STATUS==state.ToString()) || (l.FLOW_PARENT_TAG == "" && l.FLOW_STATUS ==state.ToString()) select l).ToList();