Jquery在选择radiobutton Formatter时面临的问题。 [英] problem facing in Jquery on selecting radiobutton Formatter.
本文介绍了Jquery在选择radiobutton Formatter时面临的问题。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我从网格中选择任何记录进行编辑时，我想启用编辑按钮。应该禁用页面加载编辑按钮。如果我在文本框中添加新条目，则应该启用保存按钮并禁用编辑按钮。请查找代码如下。
i want to enabled the edit button when i select any records for editing from grid .on page load edit button should be disabled.if i put new entry in textboxes save button should get enabled and edit button get disabled.please find the code given below.
<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="HomePage.aspx.cs"
Inherits="QC.UI.WEB.QCApplication.HomePage" %>
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
<table class="style1">
<tr>
<td class="style2">
ID:
</td>
<td>
<asp:Label ID="idLabel" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style2">
FirstName:
</td>
<td class="style3">
<input type="text" id="firstNameTextBox" />
</td>
</tr>
<tr>
<td class="style2">
LastName :
</td>
<td class="style3">
<input type="text" id="lastNameTextBox" />
</td>
</tr>
<tr>
<td class="style2">
NetworkId :
</td>
<td class="style3">
<input type="text" id="networkIdTextBox" />
</td>
</tr>
<tr>
<td class="style2">
Role :
</td>
<td class="style3">
<select id="roleDropDown">
<%--need to hardcode value then it will reflect in textbox--%>
<option value="***Select***">***Select***</option>
<option value="Qc User">Qc User</option>
<option value="Qc Manager">Qc Manager</option>
<option value="SeniorManager">SeniorManager</option>
</select>
</td>
</tr>
<tr>
<td class="style2">
Admin :
</td>
<td class="style3">
<label id="adminChkbox">
<input name="MyCheckBox" type="checkbox" value="1" /></label>
</td>
</tr>
</table>
<%--calling jquery function with ID--%>
<input type="button" id="saveClickButton" value="Save" onclick="return saveClickButton_onclick()" />
<%--calling jquery function with ID--%>
<input type="button" id="editButton" value="Edit"/>
<input type="button" id="cancelButton" value="Cancel" onclick="return cancelButton_onclick()" />
<%-- <tr>
<td class="style2">Percentage : </td>
<td class="style3"><asp:TextBox ID="percentageTextBox" runat="server"></asp:TextBox> </td>--%>
<div class="row-fluid">
<div id="userGrid" style="width: 100%; height: 300px;">
</div>
<div id="appPager" style="width: 100%; height: 5px;">
</div>
</div>
<script>
var userEntity;
var usersList;
///*************Page Load Function in Jquery*************
$(function () {
try {
manageOverlay(true);
debugger;
//var t = <%=UsersList %>;
usersList = JSON.parse('<%=UsersList %>');
populateUserGrid();
forButtonEnabledDisabled();
setButtonEvents();
$('#roleDropDown').select2();
$.ajaxSetup({
async: false
});
} catch (exception) {
manageOverlay(false);
alert(exception);
}
});
//******Second Function()****
function validateValue() {
debugger;
var regexpName = /^[A-Za-z][^\s]*$/;
if (!regexpName.test(this.$('#firstNameTextBox').val())) { //we r directly inserting value.
alert("Textbox value not be numbers and cannot be blank");
return false;
}
var regexpLastName = /^[A-Za-z][^\s]*$/;
if (!regexpLastName.test($('#lastNameTextBox').val())) {
alert("Textbox value not be numbers and cannot be blank");
return false;
}
var regexpNetworkID = /^[A-Za-z0-9]*$/;
if (!regexpNetworkID.test($('#networkIdTextBox').val())) {
alert("Textbox value must be alphanumeric and textbox not be empty");
return false;
}
var roleDropDownList = $('#roleDropDown').val();
if ($('#roleDropDown').val() < 1) {
alert('select the Role');
return false;
}
return true;
}
//****first Function*****
function setButtonEvents() {
debugger;
$('#saveClickButton').click(function () {
debugger;
try {
manageOverlay(true);
selectedRow = null;
if (validateValue() == true) {
saveUser();
}
}
catch (exception) {
manageOverlay(false);
alert(exception);
}
});
//**********************calling jquery function on edit Button.******************
$('#editButton').click(function () {
debugger;
//if (!$("input:checked").val()) for single .
if (!$('input[type="radio"][name="userMasterRadio"]:checked').val()) {//for Multiple..checking value selected or not..it will give for editing
alert("Please select the Records for edit");
return false;
}
setFieldValues();
});
}
///*****Third Function
function saveUser() {
debugger;
var userEntity = setUserEntity();
userEntity = JSON.stringify(userEntity);
$.ajax({
url: 'HomePage.aspx/SaveUser',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: "json",
data: '{"user":' + userEntity + '}',
success: function (result) {
debugger;
if (result.d != '') {
alert('Failed to save user.');
manageOverlay(false);
}
},
error: function (error) {
debugger;
manageOverlay(false);
alert(error.responseText);
},
async: false
});
}
//******Fourth Function*******
function setUserEntity() {
debugger;
if ($('#firstNameTextBox').val() != '') {
userEntity.FirstName = $('#firstNameTextBox').val();
}
if ($('#lastNameTextBox').val() != '') {
userEntity.LastName = $('#lastNameTextBox').val();
}
if ($('#networkIdTextBox').val() != '') {
userEntity.NetworkId = $('#networkIdTextBox').val();
}
if ($('#roleDropDown').val() != '') {
userEntity.Role = $('#roleDropDown').val();
}
return userEntity;
}
var userColumn;
var appDataView;
//****************for Binding the grid function calling*******************
function populateUserGrid() {
debugger;
var sortDir;
var sortCol = 'FirstName';
userGrid;
debugger;
var columns = [
{ id: "userMasterRadioSelection", name: "", field: "Id", formatter:radioFormatter }, //for Displaying RadioButton,ID is unique
{id: "firstName", name: "First Name", field: "FirstName", sortable: true },
{ id: "lastName", name: "Last Name", field: "LastName" },
{ id: "networkId", name: "Network Id", field: "NetworkId" },
{ id: "roleDropDown", name: "Role", field: "Role" },
{ id: "id", name: "", field: "Id", width: 0, minWidth: 0, maxWidth: 0, resizable: false, sortable: false, formatter: idformatter}];
var options = {
//editable: true, Online Editable
enableCellNavigations: true,
enableColumnRecorder: false,
enableAddRow: false,
asyncEditorLoading: false,
dataItemColumnValueExtractor: compositeDataItemColumnValueExtractor,
autoEdit: false
};
var dataView = new Slick.Data.DataView();
userGrid = new Slick.Grid("#userGrid", dataView, columns, options);
userGrid.setSelectionModel(new Slick.RowSelectionModel());
var columnpicker = new Slick.Controls.ColumnPicker(columns, userGrid, options);
userGrid.onSort.subscribe(function (e, args) {
sortDir = args.sortAsc ? 1 : -1;
sortCol = args.sortCol.field;
if ($.browser.msie && $.browser.version <= 8) {
// using temporary Object.prototype.toString override
// more limited and does lexicographic sort only by default, but can be much faster
// use numeric sort of % and lexicographic for everything else
dataView.fastSort(sortCol, args.sortAsc);
}
else {
// using native sort with comparer
// preferred method but can be very slow in IE with huge datasets
dataView.sort(function (a, b) {
var x = a[sortCol], y = b[sortCol];
return (x == y ? 0 : (x > y ? 1 : -1));
}, args.sortAsc);
}
});
dataView.onRowCountChanged.subscribe(function (e, args) {
userGrid.updateRow(args.rows);
userGrid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
userGrid.invalidateRows(args.rows);
userGrid.render();
});
// initialize the model after all the events have been hooked up
dataView.beginUpdate();
//Set data source
dataView.setItems(usersList, 'Id');
dataView.endUpdate();
$("#gridContainer").resizable();
}
//For Displaying RadioButton,In Formatter we can use dropdown,radiobutton,textbox any cotrols.
function radioFormatter(row, cell, val, columnDef, dataContext) {
debugger;
if (dataContext) {
return '<input type="radio" name="userMasterRadio" value="' + val + '"/>'; //assign RadioButton
}
return null;
}
//Function for edit button..as we take data from userlist.
//to get the userid and selected value of record.
function setFieldValues() {
debugger;
var Userid = $('input[type="radio"][name="userMasterRadio"]:checked').val(); //it will get the userid.
userEntity = $.grep(usersList, function (item) { //take the selected value..
return item.Id.toString() == Userid;
})[0]; //take the value and put in the textbox
//( assigning values for textbox we have to define.val && for label we have test) here we r getting value from grid to textbox.
$('#firstNameTextBox').val(userEntity.FirstName); //puttting value from slickgrid label to textbox..
$('#lastNameTextBox').val(userEntity.LastName);
$('#networkIdTextBox').val(userEntity.NetworkId);
//$("#roleDropDown option:selected").value(userEntity.Role);
$("#roleDropDown [value='" + userEntity.Role + "']").attr("selected", "selected");
$("#roleDropDown").select2();
};
function forButtonEnabledDisabled() {
if ($('input[type="radio"][name="userMasterRadio"]:checked').val()) {
$('#editButton').attr("disabled", false);
}
else {
$('#editButton').attr("disabled", true);
}
}
</script>
</asp:Content>
Thanks
Harshal Raut
Thanks
Harshal Raut
推荐答案
(function () {
try {
manageOverlay(true);
debugger;
//var t = <%=UsersList %>;
usersList = JSON.parse('<%=UsersList %>');
populateUserGrid();
forButtonEnabledDisabled();
setButtonEvents();
(function () { try { manageOverlay(true); debugger; //var t = <%=UsersList %>; usersList = JSON.parse('<%=UsersList %>'); populateUserGrid(); forButtonEnabledDisabled(); setButtonEvents();
< br/>
('#roleDropDown').select2();
('#roleDropDown').select2();
.ajaxSetup({
async: false
});
} catch (exception) {
manageOverlay(false);
alert(exception);
}
}）;
//******Second Function()****
function validateValue() {
debugger;
var regexpName = /^[A-Za-z][^\s]*
.ajaxSetup({ async: false }); } catch (exception) { manageOverlay(false); alert(exception); } }); //******Second Function()**** function validateValue() { debugger; var regexpName = /^[A-Za-z][^\s]*
这篇关于Jquery在选择radiobutton Formatter时面临的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
