你的位置:首页 > Java教程

[Java教程]easy ui grid的简单应用


写了一段时间的心情,今天开始写第一篇算是技术的文章,将今天在公司对一个老项目改版中涉及的代码粘贴出来,也算开个张。

主要场景是解决服务端控件的兼容性问题,因为没有专业的前端,对于样式调整也是无能为力,只好借助成熟的前端框架进行替换升级,经过一翻对比选型,最终选定easy ui来改版。

 

html代码--js应用部分

  <!--加载jquery-->
<script type="text/javascript" src="../ztree/js/jquery-1.4.4.min.js"></script> <!-- 加载jquery-easyui --> <link rel="stylesheet" href="../jquery-easyui-1.4.4/themes/default/easyui.css" type="text/css" /> <link rel="stylesheet" href="../jquery-easyui-1.4.4/themes/icon.css" type="text/css" /> <script type="text/javascript" src="../jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <script type="text/javascript" src="../jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"> </script>


  页面完成加载数据

 <script type="text/javascript">    $(document).ready(function () {      loadGrid();    });
</script>

搜索和复位功能

 1 function GdSearch() { 2       var keyWord = $("#searchword").val(); 3       if (keyWord == "") 4         return; 5       $('#tableDefineGrid').datagrid({ url: '../handler/tableHandler.ashx', queryParams: { keyWord: keyWord } }); 6     } 7     function GdReload() { 8       $("#searchword").val(""); 9       $("#tableDefineGrid").datagrid('load');10     }

 

 

body部分

<body>  <div id="customtb">    <input type="text" maxlength="99" name="searchword" id="searchword" />    <input onclick="GdSearch()" type="button" value="搜索" />    <input onclick="GdReload()" type="button" value="恢复表格" />    <input type="button" value="新增" onclick="window.open('tabledefine.aspx?oper=a', 'newwin', 'height=540, width=740top=0,left=0,toolbar=yes ,scrollbars=yes,menubar=no');" />  </div>  <div id="tableDefineGrid"></div>  <script type="text/javascript">    function loadGrid() {      //加载数据       $('#tableDefineGrid').datagrid({        title: '个人信息',        width: 'auto',        height: 'auto',        striped: true,        fit: true,        fitColumns: true,        singleSelect: true,        pageSize: 15,        url: '../handler/tableHandler.ashx',        loadMsg: '数据加载中请稍后……',        pagination: true,        rownumbers: true,        pageList: [15, 20, 30, 40, 50],        toolbar: '#customtb',//自定义toolbar        columns: [[          { field: 'tName', title: '姓名', align: 'left', width: "45%" },          { field: 'tDesc', title: '描述', align: 'left', width: "45%" }        ]]      });    }  </script></body>

后端根据传入的参数将数据按json方式输出即可。
    context.Response.ContentType = "text/json";    int pageIndex = Convert.ToInt32(context.Request["page"]);    int pageSize = Convert.ToInt32(context.Request["rows"]);    string keyWord = context.Request["keyWord"] == null ? "" : context.Request["keyWord"];    ........    var json =Newtonsoft.Json.JsonConvert.SerializeObject(result);    context.Response.Write(json);