- 首先 刚进公司 项目框架是jeesite，而且还是前后都是我一个人搞 这可我把我这个JS菜鸟逼疯了，并且这个框架封装了太多文档和资料却很少 ，所以为了造福大家和我自己（更重要是我自己）我将记录我在jeesite里遇到的一些问题和解决办法，此文会持续更新，如果你正在使用jeesite开发，能对你有所帮助 我将十分高兴
- 第一取radio选择的值
var ids = $("input[type='radio']:checked").val();//取上面<#form:radio的值$('input:radio:last').attr('checked', 'checked'); //设置默认最后一个选中，第一个就换last改为第一
其实也就是普通的jquery取值 只是这个jeesite生成页面并没有name啊 或者id什么的，需要我们自己定义去取值（
对不起这里我说错了Jeesite会生成ID，ID就是你的Path）
2.从数据库查询数据动态生成前端页面的元素 比如checkBox，Input等等
<div class="box2"> <div class="title" style="width: 100%; height: 48px; background-color: #333;"> <h3 style="text-align: left;margin-top: 10px;color: white;">请选择评分标准</h3> </div> <div class="checbox-list" style="width: 100%; min-height: 200px; background-color: #fff;background-color: #888888"> <ol id="ols" > 我将要在这里生成动态的li 以及checkBoxx </ol> </div> <div class="btn-list" style="width: 100%; height: 70px; background-color: #666;"> <button type="button" id="ok" onclick="olc()">确认</button> <button type="reset" href="javascript:history.go(-1);location.reload()" id="nook">返回</button> </div> </div>
这里给他个默认gradeType为1 就查出为1的数据
function f() { var defaultParameter = 1; $.ajax({ type: 'post', url:'${ctx}/yinyue/gradeStandard/querystandard',//请求地址 data:{ gradeType:defaultParameter }, success: function(data) { var list = data.list; $.each(list, function(k, v){ console.log(k, v); var p; //这里遍历数据进行展现到页面 p='<li>'+ '<input type="checkbox" name="test" value="'+v.id+'">'+v.gradeStandard+'</li>' $("#ols").append("<ol>"+p+"</ol>"); }); } }); } f();
继续上面的操作 页面已经生成了 数据也有了？如何获取到选择的数据？如何传输？下面的代码就是获取与传输
function olc(){ //得到选中的值 obj = document.getElementsByName("test"); checkVal = []; for(k in obj){ if(obj[k].checked) checkVal.push(obj[k].value); }; console.log(checkVal); $.ajax({ type:'post', url:'${ctx}/yinyue/activity/addGrandStand',//将选取到的ID数组转为字符串 以，隔开 data:{ id : id, gradeStandardIds:checkVal }, success :function (data) { window.location.reload(); } }); }
获取隐藏域里的ID值 以便通过ajax进行其他操作
<#form:hidden path="id" id="Ids"/> //这是一个隐藏域console.log($('#Ids').val()) //这是通过jquery取值并且打印到控制台
有时候我们会遇到做了一个选项卡但是要去获取每点击一个选项卡就获取到这选项卡的ID值用于查询，但是这个又怎么实现呢？且看下方代码.
<div class="box">
<ul class="nav" id="demo">
<li id="1" class="current" value="1">演讲</li>
<li id="2" value="2">朗读</li>
<li id="3" value="3">征文</li>
<li id="4" value="4">书法</li>
<li id="5" value="4">绘画</li>
<li id="6" value="4">摄影</li>
<li id="7" value="4">其它</li>
</ul>
</div>
//在这里我们设定了一个<ul><li>的选项卡，这只是HTML并没有js 所以是不可以实现选项卡的，下面是js代码
/**
* 选项卡切换
*/
$(function () {
$(".nav>li").click(function () {
$(this).addClass("current");
$(this).siblings().removeClass("current")
})
})
好了效果有了 如何获取ID值呢？且看下面代码
var v;
var oll = $('#demo li');
$('#demo li').click( function () {
v = $(this).attr("id");
console.log(v);
})
v:就是存放我点击选择的值 然后就可以通过这个值进行一些查询数据了，具体的查询可以看我这篇文章上面的操作，通过这v去查询数据库动态生成checkBox的值。值，获取到了 怎么查询？怎么生成checkBox选项？如何获取checkBox选中的值？
//这就是获取到单击选项卡的值后进行查询数据，动态生成checkbox
$(".nav li").click(function () {
console.log("我是选项阿卡"+v);
$.ajax({
type:'post',
url:'${ctx}/yinyue/gradeStandard/querystandard',
data:{
gradeType: v
},
success :function (data) {
console.log(data);
$.each(data,function (k,v) {
$("#olss").html("");
var p ;
p='<li>'+'<input type="checkbox" name="test" value="'+v.id+'">'+v.gradeTitle+':'+','+v.gradeStandard + '</li>'
$("#olss").append(p);
});
}
});
})
//接着我们获取选中的checkBox的值
//得到选中的值，在把值通过ajax传到数据库，这里页面上得到值是个数组 因为是多选，而我数据库是String 因此采用了.push方法以 , 分割。
obj = document.getElementsByName("test");
checkVal = [];
for(k in obj){
if(obj[k].checked)
checkVal.push(obj[k].value);
};
console.log(checkVal);
var check = checkVal.push(",");
$.ajax({
type:'post',
url:'${ctx}/yinyue/activity/addGrand',
data:{
id : id,
gradeStandardIds:check
},
success :function (data) {
window.location.reload();
}
});
};
接着 我们会经常使用jeesite里的多选列表 那么怎么对其进行操作呢？ 且看下图
我们可能会遇到这种的 比如选取人啊，公司啊，地址啊啥的，那么怎么获取其选中的值呢？其实很简单
我们按F12,找到这个选择后的框框，
注意看这里 这是啥？？好了吧 能获取了吧 哈哈，然后就可以存其你需要的ID了，
var id = $("#userIdCode").val(); 这就获取到了
接着可以AJAX发过去存起来了
下面是图片上传，jeesite的上传是上传到本地的，就算项目部署到服务器他能传到本地，可是有很多不用他这个该怎么办呢？比如上传到阿里，青牛等等，接下来我便把我的图片上传开发布置以及遇到的坑给大家说说！
首先，我自己没有写图片上传的接口，我是去调别人的接口进行图片上传，所以只需要一个ajax上传就是了，可是，我使用了无数办法都不能成功，比如各种插件,form表单等等，可能由于个人能力不足无法完成，所以我就找了专业的前端人士 好了人家搞定了，我就不要的脸抄下来记录了。。。希望可以帮到你们。
- 第一 插件：dropzone.js
- 第二 在需要的页面导入js
-
<style> #advancedDropzone { width: 100px; height: 100px; background-color: #eee; border-radius: 5px; text-align: center; cursor: pointer; position: relative; } #advancedDropzone span { font-size: 12px; } #advancedDropzone span i { display: block; font-size: 36px; line-height: 45px; } #advancedDropzone img { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 5px; } </style> <div id="advancedDropzone" class="btn btn-app"> <span><i class="fa fa-inbox"></i> 上传文件</span> //这里呢因为我要得到接口返回的上传地址用于存到数据库，所以弄个隐藏域 <#form:hidden path="" id="" name="" maxlength="200" class="form-control" required="required" /> </div> //引入js <script src="../../../static/common/js/dropzone.js"></script> <script> $('#advancedDropzone, #advancedDropzone *').dropzone({ url: '你的接口地址', maxFiles: 1, // 最多上传1个文件 maxFilesize: 2, // MB, 上传文件大小不能超过2MB acceptedFiles: 'image/*', // 上传文件类型 addRemoveLinks: true, // 是否创建删除 dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。", dictFallbackMessage:"浏览器不受支持", dictFileTooBig:"文件过大上传文件最大支持.", dictRemoveLinks: "删除", dictCancelUpload: "取消", addedfile: function(file) { }, thumbnail: function(file, dataUrl) { var _this = this; $('#advancedDropzone span').hide(); $('#advancedDropzone').append('<img src="' + dataUrl + '" /><span class="badge bg-red dz-remove">X</span>'); // 文件删除 $('#advancedDropzone').find('.dz-remove').on('click', function(e){ e.preventDefault(); e.stopPropagation(); $(this).remove(); $('#advancedDropzone').find('img').remove(); $('#advancedDropzone').find('span').show(); _this.removeFile(file); $("#activityImageSrc").html(""); }); }, success: function(file) { var downuploadUrl = JSON.parse(file.xhr.response); var downloadUrl2 = downuploadUrl.data.downloadUrl; console.log(downloadUrl2); $("#activityImageSrc").val(downloadUrl2); }, error: function(file) { console.log(file); } }); </script>这就是图片上传的前端全部了，在这里再大家说几个jeesite的坑处，当我们使用jeesite自动生成的form页面的时候，提交的js在我们用图片上传的时候需要两个分开写在一个<script>标签里的 不然会报validate is not function的！ 还有就是你们在使用各种插件的时候上传图片都可能会报这个插件的某个方法是not function，这个原因折腾了我很久各种js都导入了啊咋不行。。（现在我也没解决，好像是把引入的js放到你的上传方法上面 还有就是注意引用的顺序）
将持续更新
- jeesite里弹窗Layer的使用；
这个呢因为已经封装好了，只需要通过js.layer.xxx就可以使用了，其实这个很简单，大家看看layer文档就知道了。
最后
因为目前已经换了工作没用jeesite了，所以很久没更新啦，不过呢用了这么久了，说点心得吧，其实呢jeesite这个框架还是挺不错的，开发快捷，页面听好看，傻瓜式的操作吧，权限什么的也都已经弄好了，对了大家如果不会jeesite的权限处理的话可以看我的另一篇博客，我写的都很详细吧，一步步操作都有截图的。其实很多东西都在jeesite的文档里了，要么是因为我们没有细心观察，要么就是文档写的太烂看不懂。我大多数是处于那种看不懂，不知道文档上的代码写在哪的状态。如果有问题可以留言
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
