<div> <div> <a href="#" data-options="iconCls:'icon-edit',plain:true" >修改</a> <a href="#" data-options="iconCls:'icon-remove',plain:true" ">删除</a> <a href="#" data-options="iconCls:'icon-reload',plain:true">刷新</a> </div> <div> <label>栏目</label><input data-options="url:'@Url.Action("JsonTree", "Category", new { model="Article" })'" /> <label>标题</label> <input /> <label>录入人</label><input /> <label>添加日期</label> <input type="datetime" /> - <input type="datetime" /> <a href="#" data-options="iconCls:'icon-search'">查询</a> </div> </div> <table></table> <script src="https://www.jb51.net/~/Scripts/Common.js"></script> <script type="text/javascript"> $("#article_list").datagrid({ loadMsg: '加载中……', pagination:true, url: '@Url.Action("JsonList","Article")', columns: [[ { field: 'ModelID', title: 'ID', checkbox: true }, { field: 'CategoryName', title: '栏目'}, { field: 'Title', title: '标题'}, { field: 'Inputer', title: '录入', align: 'right' }, { field: 'Hits', title: '点击', align: 'right' }, { field: 'ReleaseDate', title: '发布日期', align: 'right', formatter: function (value, row, index) { return jsonDateFormat(value); } }, { field: 'StatusString', title: '状态', width: 100, align: 'right' } ]], toolbar: '#toolbar', idField: 'ModelID', }); //查找 $("#btn_search").click(function () { $("#article_list").datagrid('load', { title: $("#textbox_title").val(), input: $("#textbox_inputer").val(), category: $("#combo_category").combotree('getValue'), fromDate: $("#datebox_fromdate").datebox('getValue'), toDate: $("#datebox_todate").datebox('getValue') }); }); } </script>
上面都是easyui-datagrid的内容。
总体思路是BLL中实现查询公共模型列表，web中添加一个JsonList方法调用BLL中的方法并返回列表的Json类型。然后再添加一个List调用JsonList用来显示。下篇文章做删除和修改操作，希望大家会持续关注。
您可能感兴趣的文章: