王非123
- 浏览: 23952 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
刚入职不久，公司前段用jquery easyui写前端实现，最近一段时间一直沉醉在jquery easyui中，不多说，下面是我最近的成果，用easyui的两种方式实现功能。
一种是在js中编写datagrid、window、form等插件，另一种是在body中用class形式编写插件。第一种方式代码量大，个人觉得好理解，第二种方式代码量小，差错时方便查找。
[img]
[/img]
第一种：（代码量大，不易查找）
第二种：（代码量小，以查找）
对第二种方法进行解析
1、在添加内容时，使用文本编辑器KindEditor插件，需要引入其包，但在使用kindeditor时，取不到textarea里面的值，此时需要同步，加入afterBlur:function(){this.sync();具体解析参照链接http://137694047.iteye.com/blog/2051315
2、数据的分页显示，用到了datagrid插件，每页要求显示多少行数据，datagrid中的属性可以配置，更多属性的配置可查看easyui的api，easyui API的链接：http://www.jeasyui.com/
3、创建toolbar，实现添加、显示全部、批量删除、条件查找功能。
在创建这些按钮时，我遇到的问题，添加、显示全部、批量删除按钮添加到页面时，可垂直居中，当把搜索框添加上去后，搜索框不能垂直居中，搜索框的添加，破坏了页面的margin，整了一下午，勉强找到了个解决的办法，但个人觉得不太好，这里还没有找到更好方案，我的结局方案是，将添加、显示全部、批量删除按钮一个div中，并且style="float:left，搜索框放大另外一个div中。
具体代码：
4、添加和更新公用一个window、form，两个功能只需写一个window、form即可，节省代码量
插件中功能的实现调用的方法看上面贴的详细代码
附加：
js中需要添加如下代码，来调整datagrid的自适应度，使其根据浏览器的大小变化而变化。
不添加如上代码，会出现如下图片中的问题
一种是在js中编写datagrid、window、form等插件，另一种是在body中用class形式编写插件。第一种方式代码量大，个人觉得好理解，第二种方式代码量小，差错时方便查找。
[img]
[/img]
第一种：（代码量大，不易查找）
<%@ include file="/common/view/header.jsp"%>
<script type="text/javascript">
var win_add=null, win_upt=null, form_add=null, form_upt=null, form=null,win_pic=null;
var editor = null;
$(document).ready(function(){
//html文本编辑器
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowUpload:true,
filePostName:"picFile",
allowPreviewEmoticons:true,
urlType:'absolute', //返回路径为绝对路径
resizeMode:1, //编辑器只能调整高度
uploadJson:'<%=cp%>/upload/picupload',
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
afterBlur:function(){this.sync();}
});
});
//create datagrid
$('#dg').datagrid({
url:'<%=cp%>/news/getAllNews',
//title:'新闻信息列表',
pageSize:20,
pageList:[5,10,15,20],
pagination:true,//分页控件
rownumbers:true,//行号
height:document.body.clientHeight,
nowrap: true, //True 就会把数据显示在一行里
striped: true, //奇偶条显示不同的颜色
collapsible:true, //可折叠
remoteSort: false, //是否从服务器给数据排序
idField:'id',
loadMsg:'正在加载....',
columns : [ [
{field:'ck',checkbox:true,width:2}, //显示复选框
{
title : '标题',
field : 'title',
width : 300,
sortable : true,
align : 'center',
formatter:function(value,row,index){
var prefix = "<a href='javascript:void(-1);' onclick='parent.addTab(\"阅读："+row.title+"\",\"<%=cp%>/read/msginfo/"+row.id+"\")'>";
return prefix+row.title;
}
}, {
title : '作者',
field : 'author',
width : 200,
sortable : false,
align : 'center'
}, {
title : '内容',
field : 'content',
width : 380,
hidden:true,
sortable : false,
align : 'center'
}, {
title : '新闻类型',
field : 'typename',
sortable : true,
width : 200,
align : 'center'
}, {
title : '日期',
field : 'date',
width : 200,
sortable : true,
align : 'center'
},
{title:'操作',field:'opition',align:'center',width:200,
formatter:function(value,row,index){
var d='', e = '<a href="javascript:void(-1)" onclick="updatenews('+index+')">更新</a> ',f='';
f = ' <a href="javascript:void(-1)" onclick="deletenews('+index+')">删除</a>';
return d+e+f;
}
}
] ],
toolbar:"#tb",
onDblClickRow:function(rowIndex, rowData){ //双击触发
lookContent(rowIndex);
},
onLoadSuccess:function(){
$('#dg').datagrid('clearSelections'); //加载成功后，消除所有选项
},
onClickRow:function(){ //单击触发
$('#dg').datagrid('clearSelections');
}
});
init_window();
init_form();
initDialog();
});
window.onresize=function(){
$('#dg').datagrid('resize',{height:document.body.clientHeight});
}
/* 初始化窗口控件 */
function init_window(){
var width = 1000;
var height = 500;
var top = (document.body.clientHeight-height)/2;
var left = (document.body.clientWidth-width)/2;
win_add = $('#newsform').window({
closed:true,
width: width,
height: height,
top: top,
left: left,
modal: true
});
win_upt = $('#updt_news').window({
closed:true,
width: width,
height: height,
top: top,
left: left,
modal: true,
});
win_pic = $('#data_win').window({
closed:true,
width: width,
height: height,
top: top,
left: left,
modal: true,
iconCls:'icon-app'
});
}
/* 初始化表单控件 */
function init_form(){
form_add = win_add.find('form');
form_upt = win_upt.find('form');
}
/* 新增新闻 */
function newAddNews(){
win_add.window('setTitle','添加新闻');
win_add.window('open');
form_add.form('clear');
form_add.url = '<%=cp%>/news/addNews';
form = form_add;
}
//数据保存
function saveData(){
form.form('submit', {
url:form.url,
success:function(data){
eval('data='+data);
if (data.success){
$.messager.alert('成功',data.msg);
$('#dg').datagrid('reload');
closeWindow();
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
}
/* 关闭表单窗口 */
function closeWindow(){
if(win_add)
win_add.window('close');
if(win_upt)
win_upt.window('close');
}
/* 执行常规查询 */
function normalQuery(value){
$('#dg').datagrid("reload",{
title: value
});
}
/* 显示全部记录 */
function displayAll(){
$('#dg').datagrid("reload",{title:''});
}
/* 更新新闻 */
function updatenews(index){
var row =$('#dg').datagrid('getRows')[index]; //获取行
if (row){
win_upt.window('setTitle','修改新闻');
win_upt.window('open');
form_upt.form('clear');
form_upt.form('load', '<%=cp%>/news/getNews/'+row.id);
form_upt.url = '<%=cp%>/news/updateNews?id='+row.id;
form = form_upt;
$('#u_title').html(row.title); //$('#u_title')[0].innerHTML = row.title;
editor.html(row.content);
//$('#news_type').combobox('setValue',row.newstype);
} else {
$.messager.show({
title:'警告',
msg:'请您先选择用户资料。'
});
}
}
//删除
function deletenews(index){
$.messager.confirm('提示','您是否确认执行删除操作？',function(r){
if (r){
var row = $('#dg').datagrid('getRows')[index];
if(row && row.id!=null){
$.post('<%=cp%>/news/delNews/'+row.id,function(data){
eval("data="+data); //字符串转换成json对象
if(data.success){
$.messager.alert('提示',data.msg);
$('#dg').datagrid('reload');
//$.messager.show({title:'提示',msg:data.msg,timeout:2000,showType:'fade'});
}else{
$.messager.alert('错误',data.msg,'error');
}
});
}
}
});
}
/* 批量删除 */
function deleterow(){
var rows = $('#dg').datagrid('getSelections');
if(rows==null||rows.length<=0){
$.messager.alert('提示',"请先选择要删除的信息");return false;
}
$.messager.confirm('提示','确定要删除吗?',function(result){
if (result){
var ps = "";
$.each(rows,function(i,n){
if(i==0)
ps += "?id="+n.id;
else
ps += "&id="+n.id;
});
$.post('<%=cp%>/news/del'+ps,function(data){
eval("data="+data); //字符串转换成json对象
if(data.success){
$.messager.alert('提示',data.msg);
$('#dg').datagrid('reload');
}else{
$.messager.alert('错误',data.msg,'error');
}
});
}
});
}
/* 数据加载 */
function lookContent(index){
var row = $('#dg').datagrid('getRows')[index];
if (row){
win_pic.window('setTitle','新闻内容');
$('#look_content').html(row.content);
win_pic.window('open');
} else {
$.messager.show({
title:'警告',
msg:'请您先选择数据行。'
});
}
}
/* 打开附件窗口 */
function openAttach(){
$('#fltree').tree({
url:'<%=cp%>/file/fileTree',
animate : true,
checkbox:true,
onlyLeafCheck:true,
onLoadSuccess:function(node,data){
if(data==null || data.length==0){
$('#fltree').append('<li style="font-size:16px;margin-top:10px">暂无附件，请在"附件上传"模块上传。</li>');
}
}
});
$('#fileDialog').dialog('open');
}
function initDialog(){
$('#fileDialog').dialog({
closed:true,
buttons:[{
text:'确定',
handler:fileSubmit
},{
text:'取消',
handler:function(){
$('#fileDialog').dialog('close');
}
}]
});
}
var flid = [],flnms = [];
function fileSubmit(){
var nd = $('#fltree').tree('getChecked');
if(nd.length > 0){
for(var i = 0;i<nd.length;i++) {
flid[i] = nd[i].id;
flnms[i] = nd[i].text;
}
}else {
$.messager.alert('提示','请选择上传的文件','info');
}
if(flnms.length>0){
for(var i=0;i<flnms.length;i++){
var str="<span id='fl_"+i+"'>"+flnms[i]+"[<a href='javascript:void(-1)' onclick='filedel("+i+");'>删除<a>] </span>";
$('#file_tree').append(str);
}
$('#file_tree').show();
}
$('#fileDialog').dialog('close');
}
function filedel(index){
$("#fl_"+index).html("");
oaflcds.slice(index, 1);
oaflnms.slice(index, 1);
}
</script>
</head>
<body style="margin:0">
<table id="dg" ></table>
<%-- 创建toolbar --%>
<div id="tb" style="height:35px;">
<div style="float:left;padding:4px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
</div>
<div style="padding:6px;">
<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
<span style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span>
</div>
</div>
<div id="data_win" class="easyui-window" closed="true" modal="true">
<div id="look_content" style="text-align:center; padding:1px;"></div>
</div>
<!-- data item form for update -->
<div id="updt_news" class="easyui-window" closed="true" modal="true">
<div style="text-align:center; padding:1px;">
<form id="upt_news" method="post">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
<tr>
<td>标题：</td>
<!-- <td> <span id='u_title'></span></td> -->
<td><input type="text" name="title" /></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author" class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
</tr>
<tr>
<td>新闻类型：</td>
<td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="news_type" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
</tr>
<tr>
<td>日期：</td>
<td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
</tr>
<tr>
<td>内容：</td>
<td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
<!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="saveData()" id="btn-save" class="easyui-linkbutton" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
<!-- data item form for insert -->
<div id="newsform" class="easyui-window" closed="true" modal="true">
<div style="text-align:center; padding:1px;">
<form id="newsinfo_form" method="post">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
<tr>
<td>标题：</td>
<td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author" class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
</tr>
<tr>
<td>新闻类型：</td>
<td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
</tr>
<tr>
<td>日期：</td>
<td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
</tr>
<tr>
<td>附件</td>
<td><a href ="javascript:openAttach();">附件上传</a></td>
</tr>
<tr id="file_tree" style="display:none;">
<td colspan="1" ></td>
</tr>
<tr>
<td>内容：</td>
<td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
<!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="saveData()" id="btn-save" class="easyui-linkbutton" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
<div id="fileDialog" class="easyui-dialog" title="选择上传文件"
data-options="width:300,
height:450,
modal:true,
minimizable:false,
maximizable:false,
collapsible:false,
closed:true, <!-- dialog不自动打开 -->
resizable:false">
<ul id="fltree"></ul>
</div>
</body>
</html>
第二种：（代码量小，以查找）
<%@ include file="/common/view/header.jsp"%>
<script type="text/javascript">
var win_add=null, win_upt=null, form_add=null, form_upt=null, form=null,win_pic=null;
var editor = null;
$(document).ready(function(){
//html文本编辑器
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowUpload:true,
filePostName:"picFile",
allowPreviewEmoticons:true,
urlType:'absolute', //返回路径为绝对路径
resizeMode:1, //编辑器只能调整高度
uploadJson:'<%=cp%>/upload/picupload',
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
afterBlur:function(){this.sync();}
});
});
$('#dg').datagrid({
onDblClickRow:function(rowIndex, rowData){ //双击触发
lookContent(rowIndex);
},
onLoadSuccess:function(){
$('#dg').datagrid('clearSelections'); //加载成功后，消除所有选项
},
onClickRow:function(){ //单击触发
$('#dg').datagrid('clearSelections');
}
});
$('#dg').datagrid('resize', {
height:document.body.clientHeight
});
resizeWin('w',0.6,0.9,1500,1000);
resizeWin('data_win',0.6,0.9,1500,1000);
$("#ff").form({
success:function(data){
eval("data="+data);
if (data.success){
$.messager.alert('成功',data.msg);
$("#dg").datagrid("reload");
$('#w').window('close');
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
initDialog();
});
window.onresize=function(){
$('#dg').datagrid('resize',{height:document.body.clientHeight});
}
/* 标题连接 */
function titleOpeation(value,row,index){
return "<a href='javascript:void(-1);' onclick='parent.addTab(\"阅读："+row.title+"\",\"<%=cp%>/read/msginfo/"+row.id+"\")'>"+value+"</a>";
}
/* 删除更新按钮 */
function newsOpeation(value,row,index){
var a = '<a href="javascript:void(-1)" onclick="updatenews('+index+')">更新</a> ';
var b = ' <a href="javascript:void(-1)" onclick="deletenews('+index+')">删除</a>';
return a+b;
}
/* 新增新闻 */
function newAddNews(){
$('#w').window('setTitle','添加新闻');
$('#w').window('open');
$('#ff').form('clear');
editor.html("");
$('#ff').attr("action","<%=cp%>/news/addNews");
}
/* 更新新闻 */
function updatenews(index){
var row =$('#dg').datagrid('getRows')[index]; //获取行
if (row){
$('#w').window('setTitle','修改新闻');
$('#w').window('open');
$('#ff').form('clear');
$('#ff').form('load', '<%=cp%>/news/getNews/'+row.id);
$('#ff').attr("action",'<%=cp%>/news/updateNews?id='+row.id);
/* $('#u_title').html(row.title); */ //$('#u_title')[0].innerHTML = row.title;
editor.html(row.content);
//$('#news_type').combobox('setValue',row.newstype);
} else {
$.messager.show({
title:'警告',
msg:'请您先选择用户资料。'
});
}
}
/* 执行常规查询 */
function normalQuery(value){
$('#dg').datagrid("reload",{
title: value
});
}
/* 显示全部记录 */
function displayAll(){
$('#dg').datagrid("reload",{title:''});
}
//删除
function deletenews(index){
$.messager.confirm('提示','您是否确认执行删除操作？',function(r){
if (r){
var row = $('#dg').datagrid('getRows')[index];
if(row && row.id!=null){
$.post('<%=cp%>/news/delNews/'+row.id,function(data){
eval("data="+data); //字符串转换成json对象
if(data.success){
$.messager.alert('提示',data.msg);
$('#dg').datagrid('reload');
//$.messager.show({title:'提示',msg:data.msg,timeout:2000,showType:'fade'});
}else{
$.messager.alert('错误',data.msg,'error');
}
});
}
}
});
}
/* 批量删除 */
function deleterow(){
var rows = $('#dg').datagrid('getSelections');
if(rows==null||rows.length<=0){
$.messager.alert('提示',"请先选择要删除的信息");return false;
}
$.messager.confirm('提示','确定要删除吗?',function(result){
if (result){
var ps = "";
$.each(rows,function(i,n){
if(i==0)
ps += "?id="+n.id;
else
ps += "&id="+n.id;
});
$.post('<%=cp%>/news/del'+ps,function(data){
eval("data="+data); //字符串转换成json对象
if(data.success){
$.messager.alert('提示',data.msg);
$('#dg').datagrid('reload');
}else{
$.messager.alert('错误',data.msg,'error');
}
});
}
});
}
/* 数据加载 */
function lookContent(index){
var row = $('#dg').datagrid('getRows')[index];
if (row){
$('#data_win').window('setTitle','新闻内容');
$('#look_content').html(row.content);
$('#data_win').window('open');
} else {
$.messager.show({
title:'警告',
msg:'请您先选择数据行。'
});
}
}
/* 打开附件窗口 */
function openAttach(){
$('#fltree').tree({
url:'<%=cp%>/file/fileTree',
animate : true,
checkbox:true,
onlyLeafCheck:true,
onLoadSuccess:function(node,data){
if(data==null || data.length==0){
$('#fltree').append('<li style="font-size:16px;margin-top:10px">暂无附件，请在"附件上传"模块上传。</li>');
}
}
});
$('#fileDialog').dialog('open');
}
function initDialog(){
$('#fileDialog').dialog({
closed:true,
buttons:[{
text:'确定',
handler:fileSubmit
},{
text:'取消',
handler:function(){
$('#fileDialog').dialog('close');
}
}]
});
}
var flid = [],flnms = [];
function fileSubmit(){
var nd = $('#fltree').tree('getChecked');
if(nd.length > 0){
for(var i = 0;i<nd.length;i++) {
flid[i] = nd[i].id;
flnms[i] = nd[i].text;
}
}else {
$.messager.alert('提示','请选择上传的文件','info');
}
if(flnms.length>0){
for(var i=0;i<flnms.length;i++){
var str="<span id='fl_"+i+"'>"+flnms[i]+"[<a href='javascript:void(-1)' onclick='filedel("+i+");'>删除<a>] </span>";
$('#file_tree').append(str);
}
$('#file_tree').show();
}
$('#fileDialog').dialog('close');
}
function filedel(index){
$("#fl_"+index).html("");
oaflcds.slice(index, 1);
oaflnms.slice(index, 1);
}
</script>
</head>
<body style="margin:0">
<table id="dg" class="easyui-datagrid" url="<%=cp%>/news/getAllNews" idField="id"
data-options="pageSize:20,pageList:[5,10,15,20],loadMsg:'正在加载....'"
pagination="true" rownumber="true" nowrap="true" striped="true" collapsible="true" remoteSort="false"
toolbar="#tb">
<thead>
<tr>
<th data-options="field:'id',checkbox:true"></th>
<th data-options="field:'title',width :300,sortable:true,align :'center',formatter:titleOpeation">标题</th>
<th data-options="field:'author',width :200,align :'center'">作者</th>
<th data-options="field:'content',width :200,hidden:true,align :'center'">内容</th>
<th data-options="field:'typename',width :200,align :'center'">新闻类型</th>
<th data-options="field:'date',width :200,sortable:true,align :'center'">日期</th>
<th data-options="field:'opition',width :200,align :'center',formatter:newsOpeation">操作</th>
</tr>
</thead>
</table>
<%-- 创建toolbar --%>
<div id="tb" style="height:35px;">
<div style="float:left;padding:4px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
</div>
<div style="padding:6px;">
<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
<span style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span>
</div>
</div>
<div id="data_win" class="easyui-window" closed="true" modal="true">
<div id="look_content" style="text-align:center; padding:1px;"></div>
</div>
<div id="fileDialog" class="easyui-dialog" title="选择上传文件"
data-options="width:300,
height:450,
modal:true,
minimizable:false,
maximizable:false,
collapsible:false,
closed:true, <!-- dialog不自动打开 -->
resizable:false">
<ul id="fltree"></ul>
</div>
<div id="w" class="easyui-window" data-options="iconCls:'icon-save',closed:true,modal:true">
<div style="text-align:center; padding:1px;">
<form id="ff" method="post">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
<tr>
<td>标题：</td>
<td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author" class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
</tr>
<tr>
<td>新闻类型：</td>
<td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
</tr>
<tr>
<td>日期：</td>
<td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
</tr>
<tr>
<td>附件</td>
<td><a href ="javascript:openAttach();">附件上传</a></td>
</tr>
<tr id="file_tree" style="display:none;">
<td colspan="1" ></td>
</tr>
<tr>
<td>内容：</td>
<td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
<!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="$('#ff').submit();" id="btn-ok" class="easyui-linkbutton" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="$('#w').window('close');" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
</body>
</html>
对第二种方法进行解析
1、在添加内容时，使用文本编辑器KindEditor插件，需要引入其包，但在使用kindeditor时，取不到textarea里面的值，此时需要同步，加入afterBlur:function(){this.sync();具体解析参照链接http://137694047.iteye.com/blog/2051315
2、数据的分页显示，用到了datagrid插件，每页要求显示多少行数据，datagrid中的属性可以配置，更多属性的配置可查看easyui的api，easyui API的链接：http://www.jeasyui.com/
<table id="dg" class="easyui-datagrid" url="<%=cp%>/news/getAllNews" idField="id" data-options="pageSize:20,pageList:[5,10,15,20],loadMsg:'正在加载....'" pagination="true" rownumber="true" nowrap="true" striped="true" collapsible="true" remoteSort="false" toolbar="#tb"> <thead> <tr> <th data-options="field:'id',checkbox:true"></th> <th data-options="field:'title',width :300,sortable:true,align :'center',formatter:titleOpeation">标题</th> <th data-options="field:'author',width :200,align :'center'">作者</th> <th data-options="field:'content',width :200,hidden:true,align :'center'">内容</th> <th data-options="field:'typename',width :200,align :'center'">新闻类型</th> <th data-options="field:'date',width :200,sortable:true,align :'center'">日期</th> <th data-options="field:'opition',width :200,align :'center',formatter:newsOpeation">操作</th> </tr> </thead> </table>
3、创建toolbar，实现添加、显示全部、批量删除、条件查找功能。
在创建这些按钮时，我遇到的问题，添加、显示全部、批量删除按钮添加到页面时，可垂直居中，当把搜索框添加上去后，搜索框不能垂直居中，搜索框的添加，破坏了页面的margin，整了一下午，勉强找到了个解决的办法，但个人觉得不太好，这里还没有找到更好方案，我的结局方案是，将添加、显示全部、批量删除按钮一个div中，并且style="float:left，搜索框放大另外一个div中。
具体代码：
<%-- 创建toolbar --%>
<div id="tb" style="height:35px;">
<div style="float:left;padding:4px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
</div>
<div style="padding:6px;">
<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
<span style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span>
</div>
</div>
4、添加和更新公用一个window、form，两个功能只需写一个window、form即可，节省代码量
<div id="w" class="easyui-window" data-options="iconCls:'icon-save',closed:true,modal:true">
<div style="text-align:center; padding:1px;">
<form id="ff" method="post">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
<tr>
<td>标题：</td>
<td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author" class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
</tr>
<tr>
<td>新闻类型：</td>
<td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
</tr>
<tr>
<td>日期：</td>
<td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
</tr>
<tr>
<td>附件</td>
<td><a href ="javascript:openAttach();">附件上传</a></td>
</tr>
<tr id="file_tree" style="display:none;">
<td colspan="1" ></td>
</tr>
<tr>
<td>内容：</td>
<td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
<!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="$('#ff').submit();" id="btn-ok" class="easyui-linkbutton" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="$('#w').window('close');" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
插件中功能的实现调用的方法看上面贴的详细代码
附加：
js中需要添加如下代码，来调整datagrid的自适应度，使其根据浏览器的大小变化而变化。
//设置datagrid的自适应度
window.onresize=function(){
$('#dg').datagrid('resize',{height:document.body.clientHeight});
}
不添加如上代码，会出现如下图片中的问题
分享到：
发表评论
相关推荐
如题，EasyUI 增删改查的简单实现，基于maven ，Spring SpringMVC MyBatis。
easyui+ssm简单的增删改查
spring mvc + mybatis + maven + easyui + oracle 数据库实现增删改查；有任何不懂的技术问题都可以联系我共同讨论
该项目是运用ssm框架以及前台easyui技术完成的增删改查功能，适合新手学习ssm和easyui
使用SSM框架+EasyUI DataGrid数据表格实现了基本的增删改查，以及对数据分页，排序功能的实现。是一个对于后台管理的很好的例子，因为一般企业后台管理都是使用EasyUI等框架快速搭建，而且DataGrid是EasyUI最重要的...
spring mvc + mybatis + maven + easyui + oracle 数据库实现增删改查
spring mvc、mybatis、maven、easyui、oracle 数据库实现增删改查
easyui 增删改查功能实现
easyui增删改查案例
一个简单的easyui+ssh增删改查，帮助初学者快速开发
基于SSH的EasyUI的数据增删改查
springboot+mybatis+easyui增删改查分页Demo，sql采用xml方式
springmvc+spring+hibernate4+easyui实现的增删改查，通过hibernate可以对数据库进行建表操作，代码在eclipse和myeclipse都可以运行，包含jar文件
使用jquery easyui和原生jdbc实现 增删改查以及分页显示
源码示例前台套用easyui，利用ajax调用sql数据库对学生信息表进行增删改查 兼容ie，火狐和谷歌，删除在 <a href="#" class="easyui-linkbutton" id="id_cancel " iconcls="icon-cancel" plain="true" onclick=...
简单的easyui范例，其中很多属性使用的默认设置，所以没有那么多属性，实现了简单的布局，组件使用。以及增删该查功能
SSM框架实现增删改查、页面使用EasyUI设计
EasyUi框架，增删改查例子（保证完整）。直接导入eclipse即可。保证最新。
MVC+EasyUI增删改查，涵盖有分页功能，easyui绑定datagrid，下载所需积分怎么涨这么快，给大家点福利，重置为5积分。