layui中ajax加载table页面,table中配置的url不发起请求

提问 已结
39 1309
我是c
我是c 2017-10-10
悬赏:20飞吻
版本:layui 2.1.4 浏览器:
问题如下:
下面的代码是mvc母板页,如果不懂mvc就当作一个html页吧,在这个页面我想实现的效果(点击左侧菜单按钮后,用load方法ajax加载一个包含table表格的页面到母板页里面来,ajax加载的页面代码
<div class="layui-row">
<div class="layui-col-xs12">
<form class="layui-form" action="">
<div class="grid-demo grid-demo-bg1">
<div class="layui-form-item">
<label class="layui-form-label">检索</label>
<div class="layui-input-inline">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入关键字" class="layui-input">
</div>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-normal">搜索</button>
</div>
</div>
</div>
</form>
</div>
<div class="layui-col-xs12">
<table id="forum_tb" lay-data="{id: 'forum_lay_tb'}">
</table>
</div>
</div>
<script>

</script>

,但是出现了配置的url不会发起请求(url没错),渲染重载的代码写在了母板页里面,就是下面代码中的js部分,求大神指导,感谢万分!(我本是后台,前台知识欠缺,大湿看仔细点哟~~~)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>@ViewBag.Title - 我的 ASP.NET 管理应用程序</title>
@Styles.Render("~/Admin/Content/css")
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="#">控制台</a></li>
<li class="layui-nav-item"><a href="#">商品管理</a></li>
<li class="layui-nav-item"><a href="#">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="#">基本资料</a></dd>
<dd><a href="#">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>

<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">系统管理</a>
<dl class="layui-nav-child">
<dd><a id="m_Forum">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="#">云市场</a></li>
<li class="layui-nav-item"><a href="#">发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;" id="renderbody">
@RenderBody()
</div>
</div>

<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
@Scripts.Render("~/Admin/bundles/jquery")
@Scripts.Render("~/Admin/bundles/layui")
<script>
layui.use(['element', 'table'], function () {
var element = layui.element,
table = layui.table;

$("#m_Forum").click(function () {
loadForum();
});
function loadForum() {
$("#renderbody").html('');
$("#renderbody").load('@Url.Action("Index","Forum",new { area="Admin"})');
var options = {
elem: '#forum_tb',
height: 315,
cols: [[
{ field: 'id', title: 'ID', width: 80 },
{ field: 'username', title: '用户名', width: 120 },
{ field: 'id', title: '用户名', width: 80 },
{ field: 'username', title: '用户名', width: 80 },
{ field: 'sex', title: '用户名', width: 80 },
{ field: 'city', title: '用户名', width: 80 },
{ field: 'sign', title: '用户名', width: 177 },
{ field: 'experience', title: '用户名', width: 80 },
{ field: 'score', title: '用户名', width: 80 },
{ field: 'classify', title: '用户名', width: 80 },
{ field: 'wealth', title: '用户名', width: 135 }
]],
id: 'forum_lay_tb',
page: true
};
table.render(options);
table.reload('forum_lay_tb', {
url: '@Url.Action("List","Forum",new { area="Admin"})',
method: 'post'
});
};
});
</script>
@RenderSection("scripts", required: false)
</body>
</html>
回帖
  • HoneyBear
    2017-10-10
    问题最终解决了,因为使用的load加载页面是异步执行,load之后的js代码是同步执行,所以导致母板页里面的js无效,因此渲染的代码应该放入异步加载的页面当中
    1 回复
  • 我是c
    2017-10-10
    大师大师快出来
    0 回复
  • HoneyBear
    2017-10-10
    [微笑] 你可以先不带这两个参数试试
     request: { pageName: 'page', limitName: 'limit', id: 'currentId' },
    where: { //设定异步数据接口的额外参数,任意设
    aaaaaa: 'xxx',
    bbb: 'yyy'
    }
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear 好的,万分感谢,我试试
    0 回复
  • HoneyBear
    2017-10-10
    @我是c 你可以先在浏览器上看一下 你网页js部分的url是不是显示的正确的url
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear 地址没错,放入浏览器可以请求到json数据,去掉request和where也不行~
    0 回复
  • HoneyBear
    2017-10-10
    @我是c
    这样写呢
                    table.render({
    elem: "#test",
    method: 'get',
    url: '/Home/GetUserList',
    cols: [[
    { checkbox: true },
    { title: '用户Id', field: 'UserId', width: "150" },
    { title: '用户名', field: 'UserName', width: "150" },
    { title: '密码', field: 'Password', width: "150" },
    { title: '权限', field: 'Role', width: "150" },
    { title: '操作', field: 'option', toolbar: '#barDemo' }
    ]]
    });
    0 回复
  • HoneyBear
    2017-10-10
    @我是c
    FiledID 要和你返回的json的字段名一模一样
    0 回复
  • HoneyBear
    2017-10-10
    @我是c
    这一行可以忽略
    { title: '操作', field: 'option', toolbar: '#barDemo' }
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear 关键是异步接口根本没有请求到
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear 要不加QQ聊吧,问题如果解决了的话把解决方案再发到这里来?
    0 回复
  • 我是c
    2017-10-10
    0 回复
  • HoneyBear
    2017-10-10
    把你的js换成这个看看行吗
    <script>
    layui.use(['element', 'table'], function () {
    var element = layui.element,
    table = layui.table;

    $("#m_Forum").click(function () {
    loadForum();
    });
    function loadForum() {
    $("#renderbody").html('');
    $("#renderbody").load('@Url.Action("Index","Forum",new { area="Admin"})');

    table.render({
    elem: "#forum_tb",
    method: 'post',
    url: '/Admin/Forum/List',
    cols: [[
    { field: 'id', title: 'ID', width: 80 },
    { field: 'username', title: '用户名', width: 120 },
    { field: 'id', title: '用户名', width: 80 },
    { field: 'username', title: '用户名', width: 80 },
    { field: 'sex', title: '用户名', width: 80 },
    { field: 'city', title: '用户名', width: 80 },
    { field: 'sign', title: '用户名', width: 177 },
    { field: 'experience', title: '用户名', width: 80 },
    { field: 'score', title: '用户名', width: 80 },
    { field: 'classify', title: '用户名', width: 80 },
    { field: 'wealth', title: '用户名', width: 135 }
    ]]
    });
    };
    });
    </script>
    0 回复
  • STM
    2017-10-10
    为什么要这么写 根据官方DEMO 套进去不就好了
    0 回复
  • STM
    2017-10-10
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear 还是不行,那个url(/Admin/Forum/List)就没有网络请求
    0 回复
  • 我是c
    2017-10-10
    @STM 我试试,万分感谢!
    0 回复
  • HoneyBear
    2017-10-10
    @我是c 用什么语言写的?
    [微笑]
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear C# 用mvc框架
    0 回复
  • 我是c
    2017-10-10
    @STM 用你这样的写法还是不行,那个url没有网络请求
    <script>
    layui.use(['element', 'table'], function () {
    var element = layui.element,
    table = layui.table;

    $("#m_Forum").click(function () {
    loadForum();
    });
    function loadForum() {
    $("#renderbody").html('');
    $("#renderbody").load('@Url.Action("Index","Forum",new { area="Admin"})');

    table.render({
    elem: "#forum_tb",
    url: '/Admin/Forum/List',
    method: 'post',
    cols: [
    [
    { field: 'id', title: 'ID', width: 80 },
    { field: 'username', title: '用户名', width: 120 },
    { field: 'id', title: '用户名', width: 80 },
    { field: 'username', title: '用户名', width: 80 },
    { field: 'sex', title: '用户名', width: 80 },
    { field: 'city', title: '用户名', width: 80 },
    { field: 'sign', title: '用户名', width: 177 },
    { field: 'experience', title: '用户名', width: 80 },
    { field: 'score', title: '用户名', width: 80 },
    { field: 'classify', title: '用户名', width: 80 },
    { field: 'wealth', title: '用户名', width: 135 }
    ]
    ],
    id: 'forum_lay_tb'
    });
    };
    });
    </script>
    0 回复
  • HoneyBear
    2017-10-10
    @我是c 你是不是返回的时候没有返回正确的格式呀
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear 不是!url: '/Admin/Forum/List'这个地址 F12 看网络请求根本没请求,就是这个url没有触发请求
    0 回复
  • HoneyBear
    2017-10-10
    @我是c

    我是这样写的 默认code:0 好像table才认为返回数据成功
             return Json( new {
    code = 0,
    msg = "success",
    count = userList.Count,
    data = userList
    }, JsonRequestBehavior.AllowGet);
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear
     public ActionResult List()
    {
    string data = "{\"code\":0,\"msg\":\"\",\"count\":20,\"data\":[{\"id\":10000,\"username\":\"user - 0\",\"sex\":\"女\",\"city\":\"城市 - 0\",\"sign\":\"签名 - 0\",\"experience\":255,\"logins\":24,\"wealth\":82830700,\"classify\":\"作家\",\"score\":57},{\"id\":10001,\"username\":\"user - 1\",\"sex\":\"男\",\"city\":\"城市 - 1\",\"sign\":\"签名 - 1\",\"experience\":884,\"logins\":58,\"wealth\":64928690,\"classify\":\"词人\",\"score\":27},{\"id\":10002,\"username\":\"user - 2\",\"sex\":\"女\",\"city\":\"城市 - 2\",\"sign\":\"签名 - 2\",\"experience\":650,\"logins\":77,\"wealth\":6298078,\"classify\":\"酱油\",\"score\":31},{\"id\":10003,\"username\":\"user - 3\",\"sex\":\"女\",\"city\":\"城市 - 3\",\"sign\":\"签名 - 3\",\"experience\":362,\"logins\":157,\"wealth\":37117017,\"classify\":\"诗人\",\"score\":68},{\"id\":10004,\"username\":\"user - 4\",\"sex\":\"男\",\"city\":\"城市 - 4\",\"sign\":\"签名 - 4\",\"experience\":807,\"logins\":51,\"wealth\":76263262,\"classify\":\"作家\",\"score\":6},{\"id\":10005,\"username\":\"user - 5\",\"sex\":\"女\",\"city\":\"城市 - 5\",\"sign\":\"签名 - 5\",\"experience\":173,\"logins\":68,\"wealth\":60344147,\"classify\":\"作家\",\"score\":87},{\"id\":10006,\"username\":\"user - 6\",\"sex\":\"女\",\"city\":\"城市 - 6\",\"sign\":\"签名 - 6\",\"experience\":982,\"logins\":37,\"wealth\":57768166,\"classify\":\"作家\",\"score\":34},{\"id\":10007,\"username\":\"user - 7\",\"sex\":\"男\",\"city\":\"城市 - 7\",\"sign\":\"签名 - 7\",\"experience\":727,\"logins\":150,\"wealth\":82030578,\"classify\":\"作家\",\"score\":28},{\"id\":10008,\"username\":\"user - 8\",\"sex\":\"男\",\"city\":\"城市 - 8\",\"sign\":\"签名 - 8\",\"experience\":951,\"logins\":133,\"wealth\":16503371,\"classify\":\"词人\",\"score\":14},{\"id\":10009,\"username\":\"user - 9\",\"sex\":\"女\",\"city\":\"城市 - 9\",\"sign\":\"签名 - 9\",\"experience\":484,\"logins\":25,\"wealth\":86801934,\"classify\":\"词人\",\"score\":75},{\"id\":10010,\"username\":\"user - 10\",\"sex\":\"女\",\"city\":\"城市 - 10\",\"sign\":\"签名 - 10\",\"experience\":1016,\"logins\":182,\"wealth\":71294671,\"classify\":\"诗人\",\"score\":34}]}";
    return Content(data);
    }
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear 根本没有请求到这个Action方法啊,不是数据的问题,是没有请求到
    0 回复
  • HoneyBear
    2017-10-10
    @我是c [微笑] 教你个好方法 你这么写太累了
    0 回复
  • 我是c
    2017-10-10
    @HoneyBear 嗯嗯,你说呢
    0 回复
  • HoneyBear
    2017-10-10
    @我是c 你可以直接返回一个JsonResult就可以了
    0 回复
  • HoneyBear
    2017-10-10
    @我是c 看看 你看的懂吗?
    0 回复
  • HoneyBear
    2017-10-10
    @我是c JsonResult返回的时候回自动把你的List列表序列化成 你刚才手动拼接的那个串
    0 回复