项目总结一（积分）

来源：互联网发布：乐高编程软件手机编辑：程序博客网时间：2024/06/05 04:46

问题：

一、<span id=”tipmsg”></span>

　　　1、利用$(“#tipmsg”).text(“”);调用这个方法后<span>元素消失了

　　　2、可以使用$(“#tipmsg”).hide();方法来达到相同的效果

二、后台返回的数据数组的取出和C语言有点分别

json数据：

{"result":{"total":1,"data":[{"name":"完善信息","id":12,"detail":"有且只有一次，奖励150积分；注册就送，但认证前为冻结状态","extroPower":0,"basicPower":0,"maxCount":"1","scores":150.0}],"page":1,"totalPages":1,"row":-1},"code":1,"msg":"操作成功！"}

取出的时候只能：msg.result.data[0].detail;这样取。

和C语言不同的是C语言的数组只有一个数据的时候可以直接例如这样取：msg.result.data.detail；这样取

积分管理平台

　　　积分管理平台前端页面中使用到的控件：

　　　1、时间插件(datetimepicker)

(1)、需要引入的js、css

(2)、初始化

　　　 $(function() {

　　　$('.datepicker-input').datetimepicker({

timeFormat : 'HH:mm:ss',

dateFormat : 'yy-mm-dd'

　　　 });

　　　(3)、使用

　　　<input type="text" id="date" readonly="readonly"

　　　 class="form-control datepicker-input input-sm" placeholder="日期" />

　　　2、下拉框

　　　下拉框的选中事件：拉框的选中事件为onchange属性设置

　　　下拉框的样式selectpicker需要初始化：（在页面加载自动执行函数中加上下边这句代码）

　　　$(".selectpicker").selectpicker();

　　　3、左侧导航栏

　　　（1）、html代码

　　　<ul id="account-manage-ul" style="font-size:15px"><li onclick="display(this, 9)">注册</li><li onclick="display(this, 11)">实名认证</li><li onclick="display(this, 12)">完善信息</li><li onclick="display(this, 10)">医生身份认证</li></ul></li></ul>

　　　（2）、js代码

function display(v, value) {

　　　//选中项的背景颜色被修改成 #DCDCDC

$(v).css('background-color', '#DCDCDC');

　　　//下拉框根据左侧的选择相应的更改

$('#acountEvent').val(value).selectpicker('render');

　　　}

　　　//左侧导航栏选中项的颜色更改为#DCDCDC

　　　$('#account-manage-ul').find('li').eq(0).css('background-color', '#DCDCDC');

　　　//左侧选中项之外的其他项的颜色更改为#f7f2e5颜色

　　　$('#account-manage-ul').find('li').eq(0).siblings().css('background-color', '#f7f2e5');

　　　4、分页查找

　　　（1）、html代码

//注意这段代码放的位置

</head>

<tr>

<td style="text-align: center;">{{= userId}}</td>

<td style="text-align: center;">{{= event}}</td>

<td style="text-align: center;">{{= scores}}</td>

</tr></script>

//这段代码才是真正展示的时候放在html文档中的位置

<thead>

<tr>

</tr>

</thead>

</table>

</div>

<div id="pagination_box" class="the-box no-border"

style="text-align: right;">

<ul id="pagination" class="pagination-sm primary"

style="margin-right: 25px"></ul>

</div>

　　　（2）、js代码

function initTable(start) {

var userId = $('#id').val();

var event = $('#jf_source').val();

var row = 5;

.getJSON(

"api/scoremanager/records",

{

row : row,

start : start,

userId : userId,

event : event,

function(msg) {

$('#feedlists').parent().removeClass('hide');

$('#feedlists').empty();

if (msg.code == 1) {

if (!start) {

$('#pagination').remove();

$('#pagination_box')

.append(

'<ul id="pagination" class="pagination"></ul>');

$('#pagination')

.twbsPagination(

{

totalPages : msg.result.totalPages,

first : '?',

prev : '?',

next : '?',

last : '?',

onPageClick : function(

event, page) {

initTable(row

* (page - 1));

}

});

}

$('#template').tmpl(msg.result.data)

.appendTo('#feedlists');

}

});

　　　 };

//右侧查看积分详情按钮点击事件

function testViewInfo(v) {

var id = $(v).data("id");

$('#msgDiv').modal({

backdrop : 'static'

});

$('#msgDiv').modal('show');

$.get('api/scoremanager/records/' + id, function(msg) {

if (msg.code == 1) {

$("#msgModalUserName").val(msg.result.userId);

$("#msgModalUserType").selectpicker('val', msg.result.userType);

$("#changeJf").val(msg.result.scores);

$("#dateJf").val(new Date(msg.result.date).format("yyyy-MM-dd hh:mm:ss"));

} else {

yeshidenotify('error', 'middle center', msg.msg,'提示框将在3秒内关闭', 3000);

}

});

　　　 }

　　　（3）、引入js

总结：在本次的项目中，我主要负责的是web前端的数据交互部分，对于以前在公司培训过图书管理系统。对数据交互并不陌生，所以做起来也比较容易。本次项目我个人感觉收获的并不多，真的说收获就只有对于数据交互的代码更加的熟悉了。

0 0