逐步记录前端使用这些框架开发的一些要点。
jqgrid的使用：
1、在html里面插入：
<div>
<table id="listTaskManager"></table>
<div id="pagerTaskManager"></div>
</div>上面是表格，下面是分页器
2、js里面：
$("#listTaskManager").jqGrid({
url: "./test.aspx?method=Get",//ajax请求的地址
datatype: "json",
mtype: "POST",
height: "auto",//高度自适应
colNames: ['IdNo', '任务类型', 'KeyId', '计划执行时间', 'ResultCode', '执行结果', '是否有效', '修改时间', '创建时间', 'InfoJson'],//colName为在表格上显示的列明
colModel: [//字段，注意大小写要跟数据库的大小写相符
{ name: 'IdNo', index: 'IdNo', key: true, hidden: true },
{
name: 'Type', index: 'Type', width: 100, align: "center"
, edittype: "select", editoptions: { value: "<%= TaskTypeEnumsString %>" }
, formatter: "select", formatoptions: { value: "<%= TaskTypeEnumsString %>" }
},//注意配置editoptions和formatoptions，这个是请求了后端页面的一个变量，这个变量会将枚举组装出来，这个字段是一个object将会根据key来显示对应的value，这里应该填入的是一个值对串，比如1:a;2:b;3:c，如果从数据库取到的是1，则这里会显示a，以此类推，下面会将需要的后端代码也贴出来
{ name: 'KeyId', index: 'KeyId', width: 150, align: "center" },
{ name: 'Schedule', index: 'Schedule', width: 150, align: "center", sorttype: "date", formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } },
{ name: 'ResultCode', index: 'ResultCode', width: 20, align: "center", hidden: true },
{ name: 'ResultMsg', index: 'ResultMsg', width: 200, formatter: taskResultMsgFormatter, align: "center" },
{ name: 'Enabled', index: 'Enabled', width: 60, formatter: taskIsEnabledFormatter, align: "center" },
{ name: 'ModifyTime', index: 'ModifyTime', width: 150, align: "center", sorttype: "date", formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } },
{ name: 'CreateTime', index: 'CreateTime', width: 150, align: "center", sorttype: "date", formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } },
{ name: 'InfoJson', index: 'InfoJson', hidden: true }
],
multiselect: true,//可否多选
rowNum: 20,//默认每页多少条
rowList: [20, 50, 100],//选择每页显示多少条
pager: '#pagerTaskManager',//指定分页器
sortname: 'Schedule',//排序指定的字段
viewrecords: true,//显示总共有多少条记录
sortorder: "desc",//排序，desc是从大到小（降序），asc是从小到大（升序）
caption: "任务管理列表",//表格的title
gridComplete: function (){
},
beforeProcessing: function (data,status,xhr) {
ajaxResponseResult(data);
}
});
jQuery("#listTaskManager").jqGrid('navGrid', '#pagerTaskManager', { edit: false, add: false, del: false, search: false });//配置分页3、后端取值对
private string _taskTypeEnumsString;
public string TaskTypeEnumsString
{
get
{
if (string.IsNullOrEmpty(_taskTypeEnumsString))
_taskTypeEnumsString = EnumBase.GetEnumValAndDesc<Enums.TaskType>();
return _taskTypeEnumsString;
}
} /// <summary>
/// 把枚举的值和描述串起来，比如：
/// 1:a;2:b;3:c
/// </summary>
/// <typeparam name="T"></typeparam>
/// <returns></returns>
public static string GetEnumValAndDesc<T>()
{
string resultStr = "";
List<string> reslut = new List<string>();
T obj = default(T);
if (obj != null && obj.GetType().IsEnum)
{
foreach (int s in Enum.GetValues(typeof(T)))
{
string strName = Enum.GetName(typeof(T), s);
string desc = "";
MemberInfo[] memInfo = typeof(T).GetMember(strName);
if (memInfo != null && memInfo.Length > 0)
{
object[] attrs = memInfo[0].GetCustomAttributes(typeof(System.ComponentModel.DescriptionAttribute), false);
if (attrs != null && attrs.Length > 0)
desc = ((DescriptionAttribute)attrs[0]).Description;
}
reslut.Add(s + ":" + desc);
}
}
foreach (string str in reslut)
resultStr += (str + ";");
if (!string.IsNullOrEmpty(resultStr))
{
if(resultStr.LastIndexOf(';')==(resultStr.Length-1))
resultStr = resultStr.Substring(0, resultStr.Length - 1);
}
return resultStr;
}4、formatter
就是让字段不直接显示值，而是显示经过包装的一个数据
function taskResultMsgFormatter(cellvalue, options, rowdata)
{
return rowdata["ResultMsg"];//或者rowdata.ResultMsg
}5、对jqgrid使用搜索，先用post方式请求后台让后台修改数据库，再让grid重新请求一次
$("#btnDisabled").click(function () {
var s = jQuery("#listTaskManager").jqGrid('getGridParam', 'selarrrow');//这个方法可以取出勾选的项目
if (s == "") return;
var url = "AldsTaskManager.aspx?method=Disabled";
$.post(url, { idNos: s.toString() })//post数据，注意：1、变量名可以不使用引号；2、s必须toString()
.done(function (myJsonResult) {
var data = $.evalJSON(myJsonResult);// 注意，改为：var data = JSON.parse(myJsonResult);
ajaxResponseResult(data);
if (data.IsSuccess) {
}
if (data.SuccessCount && data.SuccessCount > 0)
$("#listTaskManager").trigger("reloadGrid");//结束之后重新载入表格即可
})
.fail(function (data) {
ajaxResponseResult(data);
})
.always(function (myJsonResult) {
});
});6、对jqgrid改变url、参数、post参数再发起请求
$("#btnFilter").click(function () {
$("#listTaskManager").setGridParam({
url: "AldsTaskManager.aspx?method=Get",
page: 1,
postData: {
"isFilter": "true",
"txtFilter": $("#txtFilter").val(),
"DropTypeSelector": $("#<%=DropTypeSelector.ClientID%>").val(),
"dropTimeTypeSelector": $("#dropTimeTypeSelector").val(),
"inputDateText": $("#inputDateText").val(),
"dropTimeSegmentSelector": $("#dropTimeSegmentSelector").val()
}
}).trigger("reloadGrid");
});7、分页的处理
jqgrid在请求数据的时候，会自动带一些get的参数过来，比如：
// 分页
string _page = Request["page"]; // get the requested page
string _rows = Request["rows"]; // get how many rows we want to have into the grid
string _sidx = Request["sidx"]; // get index row - i.e. user click to sort
string _sord = Request["sord"]; // get the directionint page = string.IsNullOrEmpty(_page) ? 1 : int.Parse(_page);//page，如果这个值为空，则设为1
int rows = string.IsNullOrEmpty(_rows) ? 100 : int.Parse(_rows);//要请求的行数，如果为空，则设为100
if (rows > 200)//如果传过来的值大于200，则设为200，让最大的行数不要超过200
{
rows = 200;
}
string sort = string.IsNullOrEmpty(_sidx) ? "" : (_sidx + " " + _sord);//如果排序字段取不到，即没有设置，就认为不需要排序，返回一个空字符串，如果存在的话则拼一下字段跟排序，比如"CreateTime desc"
bool hasNext;resultTable = TaskManager.GetUserTask(_nick, sort, page, rows+1, out hasNext);//将排序、第几页、行数、是否有下一页代入查询，这里需要注意的是，这里查询的时候将rows设置为原来的rows+1，这样如果查出来是rows+1行行数是完整的，说明有比rows行多，说明有下一页。这个下一页的判断是比较简单的，不用查全文总行数。 arro.page = page; //当前页
if (hasNext)
{
arro.total = page + 1; //总页数，有下一页就显示比当前页数多1
arro.records = rows * page + 1;//总条数，如果有下一页就显示比现在的条数多1
}
else
{
arro.total = page;//没有下一页的话，总页数就是当前页
arro.records = rows * (page - 1) + resultTable.Rows.Count;//没有下一页的话，总条数就是过去按乘法计算出来的条数加上当前页的条数
}
arro.rows = resultTable;
arro.IsSuccess = true;8、禁止使用排序功能
除了在顶级设置sortable:false以外，在每个col也要设置sortable:false。
9、取所有的列名
var columnNames = $("#id").jqGrid('getGridParam','colModel');10、取得所有的id
var ids = jQuery("#listAliww").jqGrid('getDataIDs');//这个id就是在col被标为key的值
for(var i=0;i < ids.length;i++){}11、取勾选的id
var s = jQuery("#listAliww").jqGrid('getGridParam', 'selarrrow');12、对一个列设置属性
$("#id").setColProp("SendLevel", { hidden: true });13、动态显示/隐藏列
jQuery("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid");
jQuery("#grid_id").setGridParam().hideCol("colname").trigger("reloadGrid");14、一开始不加载，在合适的时候才加载
默认设datatype为local，然后要加载的时候将其改为json
15、在行首显示勾选框
multiselect:true
16、自动换行
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
word-break:break-all;
}17、显示文本输入框
function notifyUrlFormatter(cellvalue, options, rowdata) {
return "<TextArea id='appId" + rowdata.AppId + "' style='width:93%;margin-top:4px;'>" + cellvalue + "</TextArea>";
}
jquery、jquery-ui的使用：
1、注意，用input做按钮，用jquery的click做点击事件做ajax请求，input必须指定为button，否则会上传整个页面
<button type="button" id="btnFilter">搜索</button>2、jquery做点击事件的做法
$("#btnFilter").click(function () {
});3、使用jquery-ui让按钮具有样式的做法
$("#btnFilter").button().click(function () {
});4、使用tab做页面布局
开发当中，页面常要显示几个相关的部分，而且为了展示的效果，不能同时展示，而要切换展示，这时使用tab就非常合适了。
<div id="tabs" style="">
<ul>
<li><a href="#tab1">tab1按钮</a></li>
<li><a href="#tab2">tab2按钮</a></li>
</ul>
<div id="tab1">
这是tab1
</div>
<div id="tab2">
这是tab2
</div>
</div>然后在js里：
$("#tabs").tabs();就生效了。
5、当点击tab才触发加载
比如说在tab2上展示一个表格，但是我们初始化这个表格可以当用户点击tab2的时候才进行，如果用户一般情况下不看tab2的话，这样必要的时候才加载才不会造成浪费。
var hasLoadList2 = false;
$("#tabs").on("tabsactivate", function (event, ui) {
if (hasLoadList2) return;
else hasLoadList2 = true;
// 下面是初始化表格
$("#list2").jqGrid({
......
});
});
6、jquery判断显示、隐藏元素
if ($("#appSecretText").is(":visible"))
{
$("#appSecretText").hide();
} else
{
$("#appSecretText").show();
}
html
1、checkbox
<input id="CheckBox1" type="checkbox" name="CheckBox1" /><label for="CheckBox1" style="vertical-align:middle;">优先出售</label>
3108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
