根据查询条件重新加载datagrid

最新推荐文章于 2023-10-25 15:09:04 发布

原创最新推荐文章于 2023-10-25 15:09:04 发布 · 959 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用EasyUI框架与JQuery结合的例子，展示了如何通过JQuery EasyUI插件实现数据表格的动态加载及分页功能，并提供了一个完整的HTML页面结构供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.6/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.6/themes/icon.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.6/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript">
    $(function(){    	
        $('#dg').datagrid({
            height:600,
            width:1093,
            pageSize: 20,
            nowrap: true,
            striped: true,

            url:'${pageContext.request.contextPath}/pcTroq/troq_ajax_select',
            columns: [[
                {field:'id',width:100,checkbox:true},
                {field:'danhao',title:'单号',width:128,
                    formatter:function(value, rec) {
                        if(null!=rec.danhao&&"undefined"!=rec.danhao){
                            return "<a href='${pageContext.request.contextPath}/pcTroq/ddxq?danhao="+rec.danhao+"'>"+rec.danhao+"</a>";
                        }
                    },align:'center'
                },
                {field:'changjiadanhao',title:'厂家单号',  align:'center'},
                {field:'wanchengshijian',title:'完成时间',width:155,align:'center'},
                {field:'wanchengdu',title:'完成度', align:'center'},
                {field:'zhuangtai',title:'工单状态', align:'center'},
                { field:'wxUserName',title:'用户名', align:'center' },
                {field:'lianxidianhua',title:'联系电话', align:'center' },
                {field:'fuwudidian',title:'联系地址' ,align:'center'},
            ]],
            pagination: true,
            rownumbers: true
        });
        var p = $('#dg').datagrid('getPager');
        $(p).pagination({
            pageSize: 20,//每页显示的记录条数，默认为10
            pageList: [20,50,100,200,500],//可以设置每页记录条数的列表
            beforePageText: '第',//页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
        });
    });


	function getOrderBySelect(){
        $('#dg').datagrid('load',{
            danhao:$("#dh").val()
        });
    }

</script>
 </head>
 <body>
  <table id="dg"></table>
  <input type="button" id="query" value="query" onclick="getOrderBySelect()"/>
  <input type="text" id="dh" />
 </body>
</html>