DataGrid数据网格
<table id="dg" title="添加其他项" class="easyui-datagrid"
style="width: 90%; height: 250px" toolbar="#toolbar"
pagination="true" rownumbers="true" fitColumns="true"
singleSelect="true">
<thead>
<tr>
<th field="rid" width="50"
editor="{type:'validatebox',options:{required:true}}">编号</th>
<th field="type" width="50"
editor="{type:'validatebox',options:{required:true}}">类型</th>
<th field="count" width="50"
editor="{type:'validatebox',options:{required:true}}">数量</th>
<td field="unit1" width="50"
editor="{type:'validatebox',options:{required:true}}">单位</td>
<th field="compensationStandard" width="50"
editor="{type:'validatebox',options:{required:true}}">补偿标准</th>
<td field="unit2" width="50"
editor="{type:'validatebox',options:{required:true}}">单位</td>
<th field="compensationFee" width="50"
editor="{type:'validatebox',options:{required:true}}">补偿费</th>
<td field="unit3" width="50"
editor="{type:'validatebox',options:{required:true}}">单位</td>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-add" plain="true" onclick="newData()">新建</a> <a
href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-edit" plain="true" onclick="editData()">编辑</a> <a
href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-remove" plain="true" onclick="destroyData()">删除</a>
</div>
<div id="dlg" class="easyui-dialog"
style="width: 400px; height: 280px; padding: 10px 20px"
closed="true" buttons="#dlg-buttons" shadow="false">
<form id="fm" novalidate>
<div class="fitem">
<input id="rid" name="rid" style="display: none;">
</div>
<div class="fitem">
<label>类型:</label> <input id="type" name="type"
style="width: 100px" method="get" url="selectTypeDictionary.json"
valueField="type" textField="type" />
</div>
<div class="fitem">
<label>数量:</label> <input id="count" name="count"
class="easyui-numberbox textbox" required="true" min="0.01"
max="100000000" precision="2" missingMessage="只能输入数字" />
</div>
<div class="fitem">
<label>补偿标准:</label> <input id="compensationStandard"
name="compensationStandard" class="easyui-numberbox textbox"
min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" />
</div>
<div class="fitem">
<label>补偿费:</label> <input id="compensationFee"
name="compensationFee" class="easyui-numberbox textbox"
min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" />
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-ok" onclick="saveData()">Save</a> <a
href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-cancel"
onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<style type="text/css">
#fm {
margin: 0;
padding: 10px 30px;
}
.ftitle {
font-size: 14px;
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.fitem {
margin-bottom: 5px;
}
.fitem label {
display: inline-block;
width: 80px;
}
</style>
Javascript 动态url添加参数
<script type="text/javascript">
$(function() { //这里一定要添加,加载数据,否则会加载失败
//console.info(parent.id)
$('#dg').datagrid({
url : 'getElseView.json',
method : 'POST',
queryParams : {
'agreementId' : parent.id //这里是获取父窗口参数
},
})
})
</script>
增删改操作
var url;
function newData(){
$('#type').combobox({
formatter:function(row){
return '<span class="item-text">'+row.type+'</span>';
}
});
$('#dlg').dialog('open').dialog('setTitle','新增项');
$("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});
$('#fm').form('clear');
url = 'addElesData.json';
}
function editData(){
$('#type').combobox({
formatter:function(row){
return '<span class="item-text">'+row.type+'</span>';
}
});
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','修改数据');
$("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});
$('#fm').form('load',row);
url = 'updateElse.json';
}
}
function chooseType(type){
// var number = parseInt(type);
var unitList = [];
if(type == "其他" ){ //else 个
unitList.push(34);
unitList.push(35);
unitList.push(31);
unitList.push(200);
}else if(type == "空调"){
unitList.push(34);
unitList.push(35);
unitList.push(31);
unitList.push(212);
}
return unitList;
}
function saveData(){
var type = $("#type").val();
var unitList = chooseType(type);
var count = $("#count").val();
var compensationStandard = $("#compensationStandard").val();
var compensationFee = $("#compensationFee").val();
var agreementContent={
RID:$("#rid").val(),
PID:parent.id,
type:unitList[3],
count:parseFloat(count).toFixed(2),
compensationStandard:parseFloat(compensationStandard).toFixed(2),
compensationFee:parseFloat(compensationFee).toFixed(2),
Unit1:unitList[0],
Unit2:unitList[1],
Unit3:unitList[2]
}
console.info(agreementContent)
console.info(url)
$.ajax({
url: url,
method:'post',
data:agreementContent,
dataType: "json",
success: function(result){
if (result==0){
$.messager.alert('提示',result.errorMsg,'error');
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
$.messager.alert('提示','提交成功!');
}
},
error:function(){
$.messager.alert('提示','数据格式错误','error');
}
});
}
function destroyData(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.ajax({
url:'deleteElse.json?agreementContentId='+row.rid,
type:'get',
success: function(data) {
if(data == 0){
$.messager.alert('提示',data.errorMsg,'error');
}else{
//登录成功
$('#dg').datagrid('reload'); // reload the user data
$.messager.alert('提示','删除成功!');
}
},
error: function(data) {
$.messager.alert('提示','错误,请重试!','error');
}
});
}
});
}
}
$(function(){
$('#fm input').each(function () {
if ($(this).attr('required') || $(this).attr('validType'))
$(this).validatebox();
})
});
$.extend($.fn.validatebox.defaults.rules, {
}
);
以下补充一些常见问题
在使用dialog插件时,默认是屏幕居中的,但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法
//获取浏览器显示区域的高度
$(window).height();
//获取浏览器显示区域的宽度
$(window).width();
//获取页面的文档高度
$(document.body).height();
//获取页面的文档宽度
$(document.body).width();
//获取滚动条到顶部的垂直高度
$(document).scrollTop();
//获取滚动条到左边的垂直宽度
$(document).scrollLeft();
$('#dlg').dialog('open');
$("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});
给 easyui-texbox赋值
$('#result').textbox().textbox('setValue','未达标');
//使用easyui里给其赋值不能直接使用 $("#id").val("param");
在程序代码中使用了panel的move属性,代码如下:
(‘#dlg’).window(‘open’);('#dlg').panel('move',{top: (document).scrollTop()+( (window).height()-200) * 0.5});
在测试时出现了一个问题:就是打开的窗口能够居中显示(有滚动条也能居中显示),但是在原来的位置上会出现一个跟窗口一样大小的阴影
<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px" closed="true" buttons="#dlg-buttons" shadow="false">
//设置属性:shadow (布尔 如果设置为true,窗口的阴影也将显示。)
//需要在此加上 shadow="false" 的属性